每当选项卡具有无效字段时,我都在努力处理 Material UI 样式。
这是我的风格,
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>
没有错误时,文本颜色和指示器颜色为蓝色。由于代码现在是这样,当该选项卡出现错误时,我设法使无效选项卡的文本颜色变为红色:
但是我怎样才能改变指示器的颜色呢?我希望文本和指示器颜色为红色。
根据docs ,有一个名为 indicator
的属性可以被覆盖,但这将更改所有选项卡的指示器样式。
Sandbox更改所有选项卡的选项卡指示器样式的示例。但是,我只想更改特定选项卡的指示器样式,而不是全部选项卡。
<小时/>编辑
我如何针对我的用例解决它(尽管,接受的答案的方法也可以完成这项工作,我的实现需要稍微更自定义的方法)。
我添加了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>
最佳答案
写一个makeStyles
列表就可以了
classes={{ indicator: indicatorList[selected]().indicator }}
如果需要主题,请使用 useTheme 并将其作为参数传递。
您还可以在具有主题的组件内构建一个恒定的颜色列表,这将是相同的。
<小时/>完整代码:
const indicatorList = ["red", "green", "blue", "black"].map(x =>
makeStyles(theme => ({
indicator: {
// backgroundColor: theme.palette.common.accent
backgroundColor: x
}
}))
);
export default function App() {
const [selected, setSelected] = useState(0);
const setTabValue = idx => {
setSelected(idx);
};
return (
<div className="App">
<Tabs
value={selected}
onChange={(e, idx) => setTabValue(idx)}
classes={{ indicator: indicatorList[selected]().indicator }}
>
<Tab label="Description" />
<Tab label="Cover" />
<Tab label="Cover" />
<Tab label="Cover" />
</Tabs>
</div>
);
}
关于javascript - 如何更改出现验证错误的选项卡的选项卡指示器颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60926912/