Я борюсь со стилями пользовательского интерфейса материалов, поскольку всякий раз, когда на вкладке есть недопустимые поля.
Вот мои стили,
const useTabsClasses = makeStyles(theme => ({
root: {
color: theme.palette.common.accent,
height: '2rem',
},
indicator: {
backgroundColor: theme.palette.common.accent,
},
indicatorColor: {
backgroundColor: theme.palette.common.accent,
},
}));
const useTabClassesErrorStyles = makeStyles({
wrapper: {
color: 'red',
},
});
const tabsClasses = useTabsClasses();
const tabClassesError = useTabClassesErrorStyles();
А вот мои вкладки,
<Tabs
value={tabValue}
onChange={(event, newValue) => setTabValue(newValue)}
classes={tabsClasses}
>
<Tab label="Description" classes={!tabValidate['description'] ? tabClassesError : {}} />
<Tab label="Cover" classes={!tabValidate['Tab2'] ? tabClassesError : {}} />
</Tabs>
При отсутствии ошибок цвет текста и цвет индикатора синий. Поскольку код прямо сейчас, мне удалось заставить цвет текста неверной вкладки стать красным, когда эта вкладка имеет ошибку:
Но как я могу изменить цвет индикатора? Я хочу, чтобы текст и цвета индикатора был красным.
Согласно документам , есть свойство с именем indicator
, которое можно переопределить, но это изменит стиль индикатора для всех вкладок.
Песочница пример изменения стилей индикатора вкладки для ВСЕХ вкладок. Однако я хочу изменить стиль индикатора только для вкладок SPECIFI C, но не для всех.
Редактировать
Как я решил это для своего варианта использования (хотя подход принятого ответа тоже бы сработал, моя реализация требовала немного более индивидуального подхода).
Я добавил TabIndicatorProps
к компоненту <Tabs ... />
и динамически определил цвет, потому что несколько вкладок могли иметь ошибки проверки:
const theme = useTheme(); // hook for material ui
const getTabIndicatorStyle = () => {
const tabIndicatorColor = theme.palette.error.main;
switch (tabValue) {
case 0:
if (!tabValidate['description']) return tabIndicatorColor;
break;
case 1:
if (!tabValidate['cover']) return tabIndicatorColor;
break;
default:
return '';
}
};
<Tabs
value={tabValue}
onChange={(event, newValue) => setTabValue(newValue)}
classes={tabsClasses}
TabIndicatorProps={{
style: {
backgroundColor: getTabIndicatorStyle(),
},
}}
>
<Tab label="Description" classes={!tabValidate['description'] ? tabClassesError : {}} />
<Tab label="Cover" classes={!tabValidate['Tab2'] ? tabClassesError : {}} />
</Tabs>