измените цвет индикатора вкладки Материал UI v5

#javascript #reactjs #material-ui #tabs

#язык JavaScript #реагирует на #материал-пользовательский интерфейс #вкладки

Вопрос:

введите описание изображения здесь

Я добавляю вкладки в свой проект, но не могу изменить фоновый индикатор :

 const theme = createTheme({  MuiTabs: {  root: {  styleOverrides: {  indicator: {backgroundColor: "red !important"},  },   indicator: {backgroundColor: "red !important"},   },  indicator: {backgroundColor: "red !important"},   styleOverrides: {  indicator: {backgroundColor: "red !important"},  },  },  })  

это мой код, но он не работает.

и это мой код jsx, он может помочь :

 import {TabContext, TabList, TabPanel} from "@material-ui/lab"; import Box from "@mui/material/Box"; import Tab from "@mui/material/Tab"; lt;TabContext value={value}gt;  lt;Box sx={{ borderBottom: 1, borderColor: 'divider' }}gt;  lt;TabList onChange={handleChange} aria-label="lab API tabs example"  textColor="primary"  indicatorColor="primary"   gt;  lt;Tab label="Company Details" value="1" /gt;  lt;Tab label="Admin Details" value="2" /gt;  lt;/TabListgt;  lt;/Boxgt;  lt;TabPanel value="1"gt;  lt;FormSimple id={id}/gt;  lt;/TabPanelgt;  lt;TabPanel value="2"gt;lt;Admin id={id}/gt;lt;/TabPanelgt;  lt;/TabContextgt;  

Ответ №1:

Я обнаружил свою ошибку, это очень хорошо работает, если

 import {TabContext, TabList, TabPanel} from "@mui/lab";