如何在Material UI主题中定义Tabs的indicatorColor与textColor

不需要修改业务代码中已有的Tabs组件属性，直接在主题配置里通过styleOverrides覆写组件内置样式即可，配置完成后所有Tabs组件会使用专属自定义色，完全不依赖palette中预设的primary、secondary色值。

完整配置代码 #

createTheme({
  palette: {
    primary: amber,
    secondary: red,
  },
  components: {
    // 配置Tabs指示器样式
    MuiTabs: {
      styleOverrides: {
        indicator: {
          // 替换为你需要的指示器颜色，支持十六进制、rgb、rgba格式
          backgroundColor: '#1890ff',
        }
      }
    },
    // 配置Tab文本样式
    MuiTab: {
      styleOverrides: {
        root: {
          // 替换为你需要的默认状态文本颜色
          color: '#666666',
          // 选中状态文本颜色
          '&.Mui-selected': {
            color: '#1890ff'
          },
          // 可选：自定义禁用状态文本颜色
          '&.Mui-disabled': {
            color: '#cccccc'
          },
          // 可选：自定义hover状态文本颜色
          '&:hover': {
            color: '#40a9ff'
          }
        }
      }
    }
  }
})

注意点 #

• 该配置优先级高于组件上indicatorColor、textColor传入的预设主题色属性，原有业务代码不需要做任何改动
• 所有颜色值不需要提前注册到palette调色板中，直接传入合法CSS颜色值即可
• 如果需要调整指示器高度、圆角等其他样式，也可以直接在MuiTabs.styleOverrides.indicator下添加对应CSS属性

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