Material-UI v1中如何自定义Tab选中指示器颜色？

return (<Tab/>)

嘿，很高兴听到你升级MUI v1的过程大部分都很顺畅！关于

return (<Tab/>)

方法一：组件级自定义样式（推荐） #

你可以通过makeStyles创建自定义样式，分别控制Tabs的指示器和Tab的选中状态：

import { makeStyles, useState } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

const useStyles = makeStyles({
  // 自定义Tab选中时的文字颜色（可选）
  customTab: {
    '&.Mui-selected': {
      color: '#2ecc71', // 替换成你想要的文字颜色
    },
  },
  // 自定义指示器的背景颜色
  customIndicator: {
    backgroundColor: '#2ecc71', // 替换成你想要的指示器颜色
  },
});

function CustomTabs() {
  const classes = useStyles();
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Tabs
      value={value}
      onChange={handleChange}
      classes={{ indicator: classes.customIndicator }}
    >
      <Tab label="首页" classes={{ root: classes.customTab }} />
      <Tab label="我的" classes={{ root: classes.customTab }} />
      <Tab label="设置" classes={{ root: classes.customTab }} />
    </Tabs>
  );
}

原理很直观：

• Tabs组件的指示器样式通过classes.indicator直接覆盖
• Tab的选中状态通过给root类添加&.Mui-selected伪类来修改样式

方法二：全局主题定制 #

如果希望整个应用的Tab指示器都统一使用自定义颜色，可以在全局主题中配置：

import { createTheme, ThemeProvider } from '@material-ui/core/styles';

const customTheme = createTheme({
  components: {
    MuiTabs: {
      styleOverrides: {
        indicator: {
          backgroundColor: '#3498db', // 全局指示器颜色
        },
      },
    },
    MuiTab: {
      styleOverrides: {
        root: {
          '&.Mui-selected': {
            color: '#3498db', // 全局Tab选中文字颜色
          },
        },
      },
    },
  },
});

// 在应用根组件中使用ThemeProvider
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 你的应用内容 */}
    </ThemeProvider>
  );
}

这种方式一劳永逸，不需要在每个Tabs组件中重复写样式。

对比之前的rootInheritSelected，现在的方式更符合MUI v1的模块化样式体系，能更精准地控制每一部分的样式，灵活性更高。

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