J'ai l'intention de styliser la route active dans réagir avec réact-routeur. J'utilise NavLink pour le faire. Veuillez consulter le code ci-dessous:
composant.js composant.module.css Par conséquent, j'ai l'intention de stylé avec class = "actif" incorporer à l'intérieur de la balise d'ancrage lorsqu'un itinéraire particulier est sélectionné. 
A.acacac , mais il ne s'agissait pas de style spécifié dans le fichier CSS. Je ne vois aucune question de spécification dans CSS et même les styles ne sont pas apparus dans les outils de développeur chrome. L'ironie est A: Hover fonctionne mais A.acactive n'est pas. Où suis-je mal?
3 Réponses :
Vous pouvez utiliser activeyle code> classe dans votre import React from 'react';
import classes from './navBar.module.css';
import {NavLink} from 'react-router-dom'
const NavBar = (props) => {
const style = {
color: 'black',
fontWeight: 'bold'
}
return (
<div className={classes.navBarStyle}>
<p className={classes.navBarTitle}>EMPOYEE DATABASE</p>
<nav className={classes.nav}>
<ul className = {classes.navUl}>
<li><NavLink activeStyle={style} to="/" exact>HOME</NavLink>
</li>
<li><NavLink activeStyle={style} to="/addEmployee" >ADD</NavLink></li>
</ul>
</nav>
</div>
)
}
export default NavBar;
Cela fonctionne bien comme les styles ajoutés seront en ligne. Merci beaucoup. Mais tenez-vous toujours de quoi savoir pourquoi ne fonctionne-t-il pas en premier lieu comme la classe = "actif" obtenu avec une balise d'ancrage.
Vous pouvez utiliser ActiveClassName comme ceci:
.navUl li .active {
background-color: rgb(119, 47, 14);
border-bottom: 2px solid white;
}
La raison pour laquelle il ne fonctionne pas est que vous utilisez des modules CSS et il mangue les noms de vos classes pour la portée localement à votre fichier JSX. Votre classe Vous pouvez garder votre CSS identique: importez votre CSS le de la même manière: ajoutez le style importé: ici, votre JSX utilisera tout ce que la classe CSS compile à. .active n'est pas appelé .active plus après compilation. Il sera préfixé et suffixé à quelque chose comme .navul_active__10mm9 (à titre d'exemple). Ensuite, votre JSX ne pourra pas récupérer cette classe car il recherche toujours .active . Vous pouvez le corriger à l'aide d'une classe importée en tant que ActiveClassname .