Как изменить цвет текста у Tabs? material ui
Хочу отредактировать начальный цвет текста и цвет текста который активный пытаюсь сделать, через эту переменную, но не получается contrastText: "#7f1616" , как можно отредактировать начальный и активных текст?
import * as React from "react";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Box from "@mui/material/Box";
import { createTheme, ThemeProvider } from "@mui/material/styles";
const theme = createTheme({
components: {
MuiTabs: {
styleOverrides: {
indicator: {
backgroundColor: "#7f1616",
height: 3,
contrastText: "#7f1616"
}
}
}
}
});
export default function ColorTabs() {
const [value, setValue] = React.useState("one");
const handleChange = (event: React.SyntheticEvent, newValue: string) => {
setValue(newValue);
};
return (
<>
<ThemeProvider theme={theme}>
<Box sx={{ width: "100%" }}>
<Tabs value={value} onChange={handleChange}>
<Tab value="one" label="Item One" />
<Tab value="two" label="Item Two" />
</Tabs>
</Box>
</ThemeProvider>
</>
);
}
Ответы (1 шт):
Автор решения: Михаил
→ Ссылка
Я задал стили напрямую в Tabs
import * as React from "react";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Box from "@mui/material/Box";
export default function ColorTabs() {
const [value, setValue] = React.useState("one");
const handleChange = (event: React.SyntheticEvent, newValue: string) => {
setValue(newValue);
};
return (
<>
<Box sx={{ width: "100%" }}>
<Tabs
value={value}
onChange={handleChange}
// Задаем цвет подчеркиванию активной вкладке
TabIndicatorProps={{sx:{backgroundColor:"#7f1616", height:"3px"}}}
sx={{
// задаем цвет со старта
"& button": {color:"#7f1616"},
"& button.Mui-selected": {color:"#7f1616"},
// Задаем цвет активной вкладке
"& button:focus": {color:"green"},
}}
>
<Tab value="one" label="Item One" />
<Tab value="two" label="Item Two" />
</Tabs>
</Box>
</>
);
}