无法删除边框底部

Lef*_*eff 2 html javascript css reactjs material-ui

我正在尝试自定义React mui 选项卡的样式,以完成类似这样的事情:

在此输入图像描述

我尝试将框阴影设置为所选选项卡并删除边框底部。设置 box-shadow 有效,但删除 border-bottom 无效。这是样式对象:

const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper
  },
  selected: {
    boxShadow: theme.shadows[1]
  },
  tab: {
    border: "none"
  }
});
Run Code Online (Sandbox Code Playgroud)

这就是我的选项卡的样子:

   <Tab
     label="Item One"
     classes={{ selected: classes.selected, root: classes.tab }}
   />
Run Code Online (Sandbox Code Playgroud)

您可以在此处查看整个示例。

我该如何删除所选选项卡上的边框?在期待控制台中的元素时,我什至看不到边框来自哪里。

zyn*_*nkn 8

我刚刚找到indicatorColor道具

<Tabs indicatorColor={""} value={value} onChange={this.handleChange}> </Tabs>
Run Code Online (Sandbox Code Playgroud)

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