Comment puis-je implémenter des pseudo-éléments CSS en ligne (comme ::after) dans React ?

Pseudo-éléments CSS en ligne dans React

Dans les composants React, le CSS en ligne peut être ajouté directement. Cependant, la possibilité d'ajouter des pseudo-classes CSS en ligne, similaires à la diapositive "::after" dans une présentation React populaire, a été un défi.

Pour résoudre ce problème, considérez la solution suivante fournie par @Vjeux de l'équipe React :

HTML/CSS normal :

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

Réagissez avec Style en ligne :

render: function() {
    return (
        <div>
          <span>Something</span>
          <div>
<p>La principale différence ici est qu'au lieu d'utiliser ::after en CSS pour créer un nouvel élément, React vous permet de créer un nouvel élément directement. Si vous le souhaitez, vous pouvez résumer cela dans un composant réutilisable pour une mise en œuvre plus facile.</p>
<p>Notez que pour les attributs spéciaux comme -webkit-filter, supprimez les tirets et mettez en majuscule la lettre suivante. Ainsi, -webkit-filter devient WebkitFilter. L'utilisation de {'-webkit-filter': ...} devrait également fonctionner.</p>
</div>
</div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!