如何修改Material UI Tabs组件的非激活标签颜色

方法一：Material UI v5 用Styled Components（推荐） #

通过styled函数自定义Tab组件，直接指定非激活状态的颜色：

import { Tabs, Tab } from '@mui/material';
import { styled } from '@mui/material/styles';

const CustomTab = styled(Tab)(({ theme }) => ({
  // 非激活标签颜色
  color: '#666666',
  // 可选：覆盖激活状态颜色
  '&.Mui-selected': {
    color: '#1976d2',
  },
}));

// 使用示例
export default function CustomTabs() {
  const [value, setValue] = useState(0);

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

  return (
    <Tabs value={value} onChange={handleChange}>
      <CustomTab label="标签一" />
      <CustomTab label="标签二" />
      <CustomTab label="标签三" />
    </Tabs>
  );
}

方法二：Material UI v4 用makeStyles #

针对MUI v4版本，通过makeStyles创建自定义样式：

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

const useStyles = makeStyles({
  tab: {
    color: '#666666', // 非激活标签颜色
    '&.Mui-selected': {
      color: '#1976d2', // 激活标签颜色
    },
  },
});

// 使用示例
export default function CustomTabs() {
  const classes = useStyles();
  const [value, setValue] = useState(0);

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

  return (
    <Tabs value={value} onChange={handleChange}>
      <Tab label="标签一" className={classes.tab} />
      <Tab label="标签二" className={classes.tab} />
      <Tab label="标签三" className={classes.tab} />
    </Tabs>
  );
}

方法三：全局主题定制（全项目统一修改） #

如果需要让整个项目的Tabs非激活标签颜色保持一致，可以直接修改MUI主题：

MUI v5 #

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiTab: {
      styleOverrides: {
        root: {
          color: '#666666', // 非激活标签颜色
          '&.Mui-selected': {
            color: '#1976d2', // 激活标签颜色
          },
        },
      },
    },
  },
});

// 在根组件包裹ThemeProvider
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的应用内容 */}
    </ThemeProvider>
  );
}

MUI v4 #

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

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        color: '#666666', // 非激活标签颜色
        '&.Mui-selected': {
          color: '#1976d2', // 激活标签颜色
        },
      },
    },
  },
});

// 根组件包裹ThemeProvider
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的应用内容 */}
    </ThemeProvider>
  );
}

注意事项 #

• 把示例中的#666666替换成你需要的非激活标签颜色值即可，#1976d2是默认激活色，可按需修改。
• 若自定义样式未生效，优先检查样式层级优先级，尽量避免使用!important。

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