我正在尝试自定义React mui tabs的样式,以完成如下操作:
我尝试将框阴影设置为选定的选项卡,并删除边框底部。设置盒子阴影有效,但删除边框底部无效。这是样式对象:
const styles = theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper
},
selected: {
boxShadow: theme.shadows[1]
},
tab: {
border: "none"
}
});
这是我的标签页的样子:
<Tab
label="Item One"
classes={{ selected: classes.selected, root: classes.tab }}
/>
您可以看到整个示例here。
我应该如何删除所选标签上的边框? 在期待控制台中的元素时,我什至看不到边框的来源。
答案 0 :(得分:2)
我刚刚找到了indicatorColor
个道具
<Tabs indicatorColor={""} value={value} onChange={this.handleChange}> </Tabs>
答案 1 :(得分:0)
您可以简单地将用于该操作的元素设置为display: none;
:
<style>
.MuiTabs-indicator {
display: none;
}
</style>