2

введите сюда описание изображенияХочу отредактировать начальный цвет текста и цвет текста который активный пытаюсь сделать, через эту переменную, но не получается 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 ответ 1

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>
    </>
  );
}

2
  • Mui-selected вы где находите данные свойства? 27 июл 2022 в 17:24
  • F12, и дальше элементы изучаю, смотрю какие классы CSS за что отвечают. 28 июл 2022 в 12:48

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.