无法删除边框底部

Question

我正在尝试自定义样式 React mui tabs 以完成这样的事情：

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

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。

我应该如何删除所选选项卡上的边框？在期待控制台中的元素时，我什至看不到边框的来源。

Answer 1

我刚找到 indicatorColor 道具

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

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

Answer 2

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

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

无法删除边框底部

Can't remove border-bottom

html

javascript

css

react-material