Cómo hacer que el estilo activeClassName de reaccionar de enrutador dom NavLink emitido en un botón de material ui?

votos
0

Estoy aprendiendo reaccionar y tratar de establecer el estilo de un reaccionará de enrutador dom NavLink encapsulado dentro de un material ui botón . La documentación indica que esto se puede lograr mediante el establecimiento de la activeClassName propiedad.

En el listado de código a continuación que intente ajustar el activeClassName en el botón que contiene el NavLink componente.


import * as navbar from './NavBar.css';

const NavBarLinks = () => (
  <>
    <Button
      color=inherit
      component={NavLink}
      activeClassName={navbar.highlighted}
      to=/about
    >
      About
    </Button>
  </>
);

La clase css destacado es el siguiente:

.highlighted {
  border-bottom: 3px solid rgb(174, 185, 28);
}

Sin embargo, ningún borde inferior se representa. ¿Cómo consigo la activeClassName estilo para hacer una reaccionar de enrutador dom NavLink emitido en un material ui botón ?

Publicado el 09/10/2019 a las 18:54
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

Lo que tienes debería funcionar, pero usted está pasando un nombre de clase, no es un estilo, así que creo que sólo tiene que hacer su activeClassNameprop igual a "destacado".

<Button
  color="inherit"
  component={NavLink}
  activeClassName="highlighted"
  to="/about"
 >
  About
</Button>

También tendrá que añadir !importanta el estilo por lo que anula el CSS del botón de la interfaz de usuario del material.

Trabajando codesandbox enlace

Respondida el 09/10/2019 a las 22:03
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more