Guide React.js pour appliquer correctement le pseudo-élément `:after` aux composants stylisés

Question

J'ai découvert cette belle animation de soulignement

<ul>
  <li><a href="#">关于</a></li>
  <li><a href="#">作品集</a></li>
  <li><a href="#">博客</a></li>
  <li><a href="#">联系</a></li>
</ul>

body,html {
  margin: 0;
  font: bold 14px/1.4 'Open Sans', arial, sans-serif;
  background: #000;
}
ul { 
  margin: 150px auto 0; 
  padding: 0; 
  list-style: none; 
  display: table;
  width: 600px;
  text-align: center;
}
li { 
  display: table-cell; 
  position: relative; 
  padding: 15px 0;
}
a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  
  display: inline-block;
  padding: 15px 20px;
  position: relative;
}
a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
a:hover:after { 
  width: 100%; 
  left: 0; 
}
@media screen and (max-height: 300px) {
    ul {
        margin-top: 40px;
    }
}

Je sais que je dois appliquer le code ci-dessus à mon composant NavItem. L'animation et tout va bien mais on dirait que cela fonctionne pour mon composant NavItem mais pas pour toute la barre de navigation NavItem CSS et images d'application

Je ne suis membre que depuis quelques heures, donc je ne sais pas quelle est la bonne façon d'afficher le site dans mon localhost. Désolé pour l'anglais de mai aussi. :)

Answer 1

Je vous recommande d'utiliser css.modules et d'ajouter un className dans votre composant. Créez d’abord un module CSS, ce qui est très simple. Suivez ces étapes :

• Créez un fichier CSS au même emplacement que votre composant : nom.module.css, créez une logique pour votre CSS
• Importez ce module pour votre composant :

import classes from './name.module.css';

(Le nom de la constante est choisi par vous)

• Ajoutez className dans la balise du composant :

<NavItem className={classes.nameofclass} />

Vérifiez si le code CSS est appliqué à la classe.