Как переопределить цвет выбора вкладки material-ui?

Question

Я создаю приложение React 16.13.0 с темой materialui-tabs, https://material-ui.com/api/tab/. Я создал эти стили в своем компоненте ...

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        "&.MuiTab-root": {
          backgroundColor: "black",
          border: 0,
          borderBottom: "2px solid",
          "&:hover": {
            border: 0,
            borderBottom: "2px solid",
          },
        },
        "&.Mui-selected": {
          backgroundColor: "none",
          borderBottom: "2px solid #373985",
          borderColor: "#373985",
        }
      }
    }
  }
});

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%",
    flexGrow: 1,
    color: "#3739B5",
    backgroundColor: "white",
  },
  viewButtons: {
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(1),
  },
}));

Они применяются к

  <ThemeProvider theme={theme}>
  <AppBar position="static">
    <Tabs
      classes={classes}
      value={value}
      variant="fullWidth"
      centered
      onChange={handleChange}
      aria-label="volunteer dashboard tabs"
    >
      <Tab label={proposedLabel} {...a11yProps(2)} />
      <Tab label={planningLabel} {...a11yProps(1)} />
      <Tab label={inProgressLabel} {...a11yProps(0)} />
      <Tab label={completedLabel} {...a11yProps(3)} />
    </Tabs>
  </AppBar>
  </ThemeProvider>

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

.PrivateTabIndicator-colorSecondary-267 {
        
    background-color: #f50057;
}

.PrivateTabIndicator-root-265 {
            width: 100%;
    
        bottom: 0;
    
        height: 2px;
    
        position: absolute;
    
        transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

Однако, несмотря на то, что я указал, что в моей теме цвет выглядит красным, несмотря на то, что я указал в своем стиле

Как переопределить цвет границы выбранной вкладки?

Answer 1

Можете ли вы попробовать это решение, работающее на меня. Я предполагаю, что вы хотите переопределить цвет индикатора нижней границы.

    <Tabs value={0} TabIndicatorProps={{ style: { background: "#hex-color" } }}>
         <Tab className={clasess.tab} label="Home" />
         <Tab className={clasess.tab} label="Services" />
    </Tabs>