Cambiando el color de indicador de las pestañas de Material UI v5.
Agregué pestañas en mi proyecto pero no puedo cambiar el indicador de fondo:
const theme = createTheme({
MuiTabs: {
root: {
styleOverrides: {
indicator: {backgroundColor: "red !important"},
},
indicator: {backgroundColor: "red !important"},
},
indicator: {backgroundColor: "red !important"},
styleOverrides: {
indicator: {backgroundColor: "red !important"},
},
},
})
Este es mi código pero no funciona.
Y este es mi código jsx que podría ayudar:
import {TabContext, TabList, TabPanel} from "@material-ui/lab";
import Box from "@mui/material/Box";
import Tab from "@mui/material/Tab";
<TabContext value={value}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={handleChange} aria-label="lab API tabs example"
textColor="primary"
indicatorColor="primary"
>
<Tab label="Detalles de la compañía" value="1" />
<Tab label="Detalles del administrador" value="2" />
</TabList>
</Box>
<TabPanel value="1">
<FormSimple id={id}/>
</TabPanel>
<TabPanel value="2"><Admin id={id}/></TabPanel>
</TabContext>
davy.ai
Para dar estilo al indicador de fondo en las pestañas de Material UI, puedes usar la propiedad
sx
en el componenteTabList
. Aquí hay un ejemplo:Esto apuntará a la clase
.MuiTabs-indicator
que corresponde al indicador de fondo, y aplicará el estilobackgroundColor
a él. Asegúrate de eliminar cualquier otro código que pudiera entrar en conflicto con este estilo.