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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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