При использовании компонента вкладки Material-UI, как настроить стиль для выбранной вкладки?

Question

Я пытаюсь использовать компонент Material-ui Tab в моем приложении React - https://material-ui.com/api/tabs/. Моя панель вкладок настроена так:

  <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>

У меня вопрос, как настроить стиль вкладки, когда она выбрана? В документации указан класс «индикатор», поэтому я использую эти стили

  root2: {
    width: "100%",
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
  root3: {
    paddingRight: theme.spacing(1),
    flexGrow: 1,
    width: "100%",
  },
  viewButtons: {
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(1),
  },
  indicator: {
    border: 0,
    borderBottom: "2px solid",
    "&:hover": {
      border: 0,
      borderBottom: "2px solid",
    },
  }

Однако этот класс не вступает в силу. Какой класс использовать для правильного оформления выбранной вкладки?

Answer 1

Индикатор active фактически является частью компонента tab , а не табуляции. Если вы проверите внутри, вы увидите selected опору (которая будет .Mui-selected).

Вы должны использовать createMuiTheme с MuiThemeProvider для стиля:

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        "&.Mui-selected": {
          background: "red"
        }
      }
    }
  }
});

Здесь рабочий пример: https://codesandbox.io/s/mui-theme-style-selected-tab-pe03k?file= / demo. js

Answer 2

Я считаю, что вы хотите изменить стили индикатора (граница в нижней части вкладки), я столкнулся с той же проблемой, но нашел обходной путь для этого, это решение немного взломано, но оно работает, вам нужно чтобы установить фон индикатора прозрачным и применить стили к его внутреннему элементу, как показано ниже,

indicator: {
    backgroundColor: 'transparent',
    '& > div': {
        width: '100%',
        backgroundColor: theme.palette.primary.main,
        '&:hover': {
            backgroundColor: theme.palette.secondary.main,
        },
    },
},

наведение работает только при наведении на индикатор, если вы хотите изменить цвет индикатора при наведении на На вкладке необходимо применить стили к root.