Wie kann ich Inline-CSS-Pseudoelemente (wie ::after) in React implementieren?

Inline-CSS-Pseudoelemente in React

Innerhalb von React-Komponenten kann Inline-CSS direkt hinzugefügt werden. Allerdings war die Möglichkeit, Inline-CSS-Pseudoklassen hinzuzufügen, ähnlich der „::after“-Folie in einer beliebten React-Präsentation, eine Herausforderung.

Um dieses Problem zu lösen, betrachten Sie die folgende Lösung von @Vjeux von das React-Team:

Normales HTML/CSS:

<div class="something"><span>Something</span></div>
<style>
    .something::after {
    content: '';
    position: absolute;
    -webkit-filter: blur(10px) saturate(2);
}
</style>

Reagieren Sie mit Inline-Stil:

render: function() {
    return (
        <div>
          <span>Something</span>
          <div>
<p>Der Hauptunterschied besteht darin, dass Sie mit React anstelle von ::after in CSS ein neues Element direkt erstellen können. Bei Bedarf können Sie dies zur einfacheren Implementierung in eine wiederverwendbare Komponente abstrahieren.</p>
<p>Beachten Sie, dass Sie bei speziellen Attributen wie -webkit-filter die Bindestriche entfernen und den folgenden Buchstaben groß schreiben. So wird aus -webkit-filter WebkitFilter. Die Verwendung von {'-webkit-filter': ...} sollte ebenfalls funktionieren.</p>
</div>
</div>

Das obige ist der detaillierte Inhalt vonWie kann ich Inline-CSS-Pseudoelemente (wie ::after) in React implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!