我是 Material UI 的新手,正在尝试更改所选选项卡的颜色。
现在它是深蓝色,我正在尝试将其更改为红色。
我提供了内联样式,但它没有改变。你能告诉我如何解决吗?
我在下面提供了我的沙箱和代码片段
https://codesandbox.io/s/yqj5q8v461
<Tabs
value={value}
onChange={this.handleChange}
scrollable
scrollButtons="on"
indicatorColor="primary"
textColor="primary"
>
<Tab
label="Search"
icon={<PhoneIcon />}
style={{ border: "red" }}
/>
<Tab
favorites={favorites}
label="Favorites"
icon={<FavoriteIcon />}
/>
</Tabs>
最佳答案
您可以使用 CSS API 覆盖选项卡的样式,
举个例子:
<Tabs
value={value}
onChange={this.handleChange}
scrollable
scrollButtons="on"
classes={{ indicator: classes.tabsIndicator }}
>
<Tab
label="Search"
icon={<PhoneIcon />}
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
/>
<Tab
favorites={favorites}
label="Favorites"
icon={<FavoriteIcon />}
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
/>
</Tabs>
然后我将样式添加为:
const styles = theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.palette.background.paper
},
tabsIndicator: {
backgroundColor: "red"
},
tabRoot: {
"&:hover": {
color: "red",
opacity: 1
},
"&$tabSelected": {
color: "red",
fontWeight: theme.typography.fontWeightMedium
},
"&:focus": {
color: "red"
}
},
tabSelected: {}
});
这是您的代码中的一个工作示例:https://codesandbox.io/s/882o65xlyl
希望对你有帮助
关于javascript - Material ui 中选项卡的内联样式不会改变颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53197629/