Las pestañas desaparecen al hacer clic, la mayor parte del código proviene de material-ui docs. Aquí estoy usando material-ui 5. No entiendo por qué el código se comporta así. El estilo también es de material ui 5. Esta es una barra de navegación simple, con 5 pestañas
import React, { useState } desde 'react'; importar {AppBar, Toolbar, Tabs, Tab, useScrollTrigger, Box, Button} desde '@mui/material'; import {estilo} desde '@mui/material/styles'; importar logotipo desde '../../assets/logo.svg';
const ElevationScroll = props => { const { children } = props;
const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0, }); return React.cloneElement(children, { elevation: trigger ? 4 : 0, }); }; const ToolbarMargin = styled('div')(({ theme }) => ({ ...theme.mixins.toolbar, marginBottom: '3em', })); const StyledTab = styled(Tab)(({ theme }) => ({ ...theme.typography.tab, minWidth: 10, marginLeft: '25px', color: 'white', })); const StyledButton = styled(Button)(({ theme }) => ({ ...theme.typography.estimate, borderRadius: '50px', marginLeft: '50px', marginRight: '25px', height: '45px', })); const Header = props => { const [value, setValue] = useState(0); const handleChange = (e, newvalue) => { setValue(newvalue); }; return ( <React.Fragment> <ElevationScroll> <AppBar position='fixed'> <Toolbar disableGutters={true}> <Box component='img' sx={{ height: '7em' }} alt='company logo' src={logo} /> <Tabs value={value} onChange={handleChange} sx={{ marginLeft: 'auto' }}> <StyledTab label='Home' /> <StyledTab label='Services' /> <StyledTab label='The Revolution' /> <StyledTab label='About Us' /> <StyledTab label='Contact Us' /> </Tabs> <StyledButton variant='contained' color='secondary'> Free Estimate </StyledButton> </Toolbar> </AppBar> </ElevationScroll> <ToolbarMargin /> </React.Fragment> ); }; export default Header;Las pestañas parecen desaparecer, porque la clase selected en la pestaña tiene el mismo color que el color de fondo de las tabs . Puede inspeccionar el comportamiento en la pestaña Inspect de las herramientas de desarrollo del navegador.
Debe usar diferentes colores para el fondo y el color de la pestaña activa. Aquí cambié el color de la pestaña active para demostrar la diferencia con el accesorio sx del componente Tabs y utilicé el selector de clase para apuntar a la clase seleccionada por .Mui-selected de la pestaña activa.
También puede usar la propiedad textColor de las pestañas para usar el color secundario para el texto de la pestaña.
<Tabs // textColor="secondary" value={value} onChange={handleChange} sx={{ marginLeft: "auto", "&& .Mui-selected": { // && are used to increase the specificity color: "#d1d1d1" } }} >Creé una caja de arena a partir de su código de ejemplo.