React MUI Tabs自定义样式问题：无法移除选中标签的border-bottom

这个问题我之前也踩过坑！你找不到的那个底部边框，其实不是来自Tab组件本身，而是MUI Tabs自带的TabIndicator（标签指示器）——它是一个独立的元素，用来标记当前选中的标签，默认样式就是底部的一条边框。你给Tab设置border: none自然没用，因为修改的目标错啦😉

解决方案步骤： #

1. 隐藏默认的TabIndicator：在样式对象里新增类控制指示器显示，将其设为隐藏。
2. 保留你已设置的选中Tab样式：你之前写的selected类（添加box-shadow）可以继续使用。

修改后的代码示例： #

首先更新你的样式对象：

const styles = theme => ({ 
  root: { flexGrow: 1, backgroundColor: theme.palette.background.paper }, 
  selected: { boxShadow: theme.shadows[1] }, 
  tab: { /* 这里可保留Tab的基础样式 */ },
  // 新增：隐藏默认的标签指示器
  indicator: { display: 'none' }
});

然后在Tabs组件上引用这个indicator类（注意是在Tabs组件上，不是单个Tab）：

<Tabs 
  classes={{ indicator: classes.indicator }}
  // 其他必要props比如value、onChange等
>
  <Tab label="Item One" classes={{ selected: classes.selected, root: classes.tab }} />
  <Tab label="Item Two" classes={{ selected: classes.selected, root: classes.tab }} />
</Tabs>

这样操作后，默认的底部边框（指示器）就会被隐藏，同时你给选中Tab设置的box-shadow会正常生效，完美替换掉原来的边框效果。

小技巧： #

以后再遇到找不到样式来源的情况，可以用浏览器控制台Elements面板的选择元素工具，直接点击那个未知边框，就能定位到对应的DOM元素——你会发现它是类名为MuiTabs-indicator的span标签，这就是我们需要隐藏的指示器。

内容的提问来源于stack exchange，提问作者Leff