Material UI 新手,希望这个问题有意义。我正在使用 Material UI 选项卡,并且能够根据需要自定义 css。见下图:
我遇到一个问题,即所选选项卡和其他选项卡具有不同的不透明度(?),即使它们具有相同的颜色。在网上找不到任何材料 UI 文档来使它们统一,我尝试了几种方法 [TabIndicatorProps],甚至将以下内容添加到 Tabs 类中
"&.Mui-selected": {
color: "1D4659",
opacity: "70%"
}
有人知道如何解决这个问题吗?我可以更改选定的选项卡或其他选项卡。我只是想确保它们是统一的。
您可以覆盖
MuiTab-root
而不是 Mui-selected
。
1-声明您的自定义样式
const useStyles = makeStyles({
customTabs: {
"& .MuiTab-root": {
color: "#1D4659",
opacity: "70%"
}
}
});
2- 在
<Tabs>
中使用您的自定义样式
const classes = useStyles();
<Tabs
classes={{ root: classes.customTabs }}
...
>
<Tab ... />
<Tab ... />
<Tab ... />
<Tab ... />
<Tab ... />
</Tabs>
这里是代码:https://codesandbox.io/s/gracious-framework-xo1cp?file=/src/App.js
此外,您可以使用
theme.ts
自定义它:
MuiTab: {
styleOverrides: {
root: ({ theme }: { theme: Theme }) => ({
color: 'black',
"&.Mui-selected":{
color: 'red'
}
}),
},
},