无法删除底部边框

时间:2019-10-30 11:56:28

标签: javascript html css react-material

我正在尝试自定义React mui tabs的样式,以完成如下操作:

enter image description here

我尝试将框阴影设置为选定的选项卡,并删除边框底部。设置盒子阴影有效,但删除边框底部无效。这是样式对象:

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

我应该如何删除所选标签上的边框? 在期待控制台中的元素时,我什至看不到边框的来源。

2 个答案:

答案 0 :(得分:2)

我刚刚找到了indicatorColor个道具

<Tabs indicatorColor={""} value={value} onChange={this.handleChange}> </Tabs>

参考:https://material-ui.com/api/tabs/

答案 1 :(得分:0)

您可以简单地将用于该操作的元素设置为display: none;

<style>
  .MuiTabs-indicator {
    display: none;
  }
</style>