如何移除Material-UI React选中Tab的默认底部蓝色边框？

你当前的问题是：通过主题自定义MuiTab样式后，选中Tab的上、左、右边框已经生效，但默认的蓝色底部边框还在，而且发现这个边框是父组件（Tabs）的元素，带有动画效果。不用重构组件，直接覆盖Tabs的指示器样式就能解决。

解决方案：在主题中同时覆盖MuiTabs的指示器样式 #

那个默认的蓝色边框是Tabs组件的MuiTabs-indicator元素，专门用来标记选中Tab的指示器。你只需要在主题的components配置里加上对MuiTabs的样式覆盖，隐藏或者修改这个指示器即可。

结合你现有的代码，完整的主题配置示例如下：

const theme = createTheme({
  components: {
    MuiTab: {
      styleOverrides: {
        root: {
          textTransform: 'capitalize',
          fontWeight: 600,
          '& .MuiAvatar-root': {
            width: 72,
            height: 'auto',
            marginBottom: 6,
          },
          '&.Mui-selected': {
            borderTop: `2px solid ${COLORS.PrimaryMedDark}`,
            borderLeft: `1px solid ${COLORS.BorderGray}`,
            borderRight: `1px solid ${COLORS.BorderGray}`,
            borderBottom: 'none',
            color: COLORS.PrimaryMedDark,
          },
          '& .MuiIconButton-root': {
            padding: 0,
            backgroundColor: COLORS.White,
          },
        },
      },
    },
    // 新增MuiTabs的样式覆盖，隐藏默认指示器
    MuiTabs: {
      styleOverrides: {
        indicator: {
          display: 'none',
        },
      },
    },
  },
});

替代方案：仅在特定Tabs组件中隐藏指示器 #

如果不想全局隐藏所有Tabs的指示器，只想针对当前使用的Tabs组件处理，可以给该Tabs组件添加sx属性直接覆盖样式：

<Tabs 
  sx={{ '& .MuiTabs-indicator': { display: 'none' } }}
  // 其他props
>
  {/* Tab组件 */}
</Tabs>

这样就能彻底去掉那个默认的蓝色底部边框，同时保留你自定义的选中Tab边框样式，完全不需要重构组件。

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