El CSS para mi active class no parece aplicarse en el componente renderizado, aunque el resto del CSS sí se aplica. El CSS se aplica mediante módulos CSS. Dado que el componente NavLink del paquete react-router-dom establece la clase como activa, he seleccionado la clase activa en el archivo CSS, pero por alguna razón todo se aplica al HTML renderizado excepto esa selección específica.
El método render() del componente React :
render () { return ( <Fragment> <nav className={CSSModule.Nav}> <ul> <li><NavLink to="/" exact>Home</NavLink></li> <li><NavLink to={{ pathname: "/new-post", hash: "#submit", search: "?quick-submit" }}>New Post</NavLink></li> </ul> </nav> <Route path={["/", "/home"]} exact component={Posts} /> <Route path="/new-post" exact component={NewPost} /> </Fragment> ); }El código CSS :
.Nav { box-sizing: border-box; padding: 20px; } .Nav ul { list-style: none; display: flex; justify-content: space-evenly; background-color: burlywood; padding: 10px; } .Nav ul a { color: black; text-decoration: none; } .Nav ul a:active { color: white; } .Nav ul a:hover, .Nav ul a.active { border-bottom: 1px solid black; }Aquí hay una muestra de codesandbox .
Después de una investigación más detallada, parecería que los Módulos CSS de alguna manera bloquean la aplicación del estilo para la clase activa.
debe eliminar todo activeClassName="my-active" en app.js y agregar esto en styles.module.css
a[class="active"] { border-bottom: 1px solid black !important; } de lo contrario, debe configurar activeClassName={CSSModule.active} para cada NavLink y asegurarse de que .active esté definido en su estilo
Simplemente cambie su selector a my-active en lugar de .active :
.Nav ul a:hover, .Nav ul a.my-active { border-bottom: 1px solid black !important; }