Применить стиль к ButtonBase в компоненте Tab - PullRequest
Новая
       28

Применить стиль к ButtonBase в компоненте Tab

1 голос
/ 09 марта 2020

Я пытаюсь определить переопределение стиля пользовательского интерфейса с помощью вложенного компонента. Скажем, я хочу увеличить высоту нижней границы активного Tab. Эта граница применяется базовым ButtonBase.

Вот определение стиля: 

const useStyles = makeStyles(theme => ({
  root: {
    // an example brutal overriding, not clean, I'd like a better approach for the button
    "& .MuiSvgIcon-root": {
      marginRight: "8px"
    }
  },
  // override Tab
  tabWrapper: {
    flexDirection: "row"
  },
  tabSelected: {
    color: theme.palette.primary.main
  },
  tabLabelIcon: theme.mixins.toolbar, // same minHeight than toolbar
  // TODO override buttonBase ???
  // ...
}));

Пример использования: 

      <Tab
        value="/"
        classes={{
          wrapper: classes.tabWrapper,
          selected: classes.tabSelected,
          labelIcon: classes.tabLabelIcon
        }}
        icon={
          <React.Fragment>
            <DashboardIcon />
          </React.Fragment>
        }
        label="Home"
        // TODO: is this the expected syntax? TypeScript is not happy with this prop...
        buttonBaseProps={{ classes: {} }}
      />

Понятия не имею, как чтобы определить ButtonBase классы в этом примере.

Как мне определить мои реквизиты для переопределения стиля ButtonBase?

Редактировать: do c здесь https://material-ui.com/api/tab/, в последнем разделе описан процесс наследования, но документация очень краткая.

Редактировать 2: пример использования плох, поскольку вы должны переопределить ".MuiTabs-indicator", чтобы увеличить высоту нижней границы (на самом деле это дополнительный промежуток не граница) но вопрос стоит. Представьте, что я хочу изменить ButtonBase цвет фона, например.

1 Ответ

1 голос
/ 09 марта 2020

Как оказалось, внутри компонента Tab нет отдельного компонента ButtonBase. Таким образом, вы не найдете реквизит с именем buttonBaseProps . Сама вкладка отображается как компонент кнопки.

Какой бы стиль вы ни хотели передать, передайте его root в классах. См. Ниже 

 <Tab classes={{
          root: classes.customButtonBaseRoot,
          wrapper: classes.tabWrapper,
          selected: classes.tabSelected,
          labelIcon: classes.tabLabelIcon
        }}
      />

https://codesandbox.io/s/apply-style-to-buttonbase-in-a-tab-component-izgj5

...