0
181
VistasReactJS cambia el color de fondo del Navlink seleccionado en una barra de navegación de arranque de reacción
Así que tengo una barra de navegación de arranque de reacción. Necesito cambiar el color de fondo del enlace de navegación seleccionado. Mi Css solo está coloreando alrededor del título del enlace de navegación y no todo el espacio ocupado por este enlace de navegación
mi barra de navegación:
Como debería ser:
Mi código de barras de navegación:
const NavBar = () => { let tabs = [ { name: "Warehouses" }, { name: "Dispatched to Process" }, { name: "Sales" }, { name: "User Manager" }, { name: "Time Tracking" } ]; return ( <> <Navbar fixed="top" bg="primary" variant="dark"> <Nav className="me-auto"> { Object.keys(tabs).map(id => { return <NavLink className="my-navbar" to={"/" + tabs[id].name}> {tabs[id].name} </NavLink> }) } </Nav> </Navbar> </> ); } export default NavBar;y finalmente mi nav.css
.my-navbar{ height: 100%; margin: 15px 15px 15px 15px; color: white; font-size: 14px; font-family: Verdana, Geneva, Tahoma, sans-serif; text-decoration: none; } .me-auto{ height: 100%; } .my-navbar:visited { height: 100%; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 14px; } .active { height: 100%; font-family: Verdana, Geneva, Tahoma, sans-serif; color: white; font-size: 14px; background-color: #61fb69; }2 Respuestas
Responde la pregunta0
La barra de navegación en react-bootstrap ya tiene su propio relleno superior/inferior, por lo que tendrá que eliminarlo y darle una altura para compensar el relleno eliminado.
A continuación tendrás que darle a todos los elementos padre de los navitems una altura del 100% para que ocupen toda la altura
height: 100%; align-items: center; Puedes ver aquí, por defecto no ocupa toda la altura 
Agregue este css para la clase .active
height: 100%; align-items: center; font-weight: 800; display: flex; background-color: #61fb69;Esto es lo que pude lograr.
0
Intente agregar el relleno para my-navbar:hover para decir padding: 20px 10px . Siga ajustando el primer valor hasta que la altura de NavLink<NavLink /> coincida con la de <Nav>'Nav' .