Material-UI Tabs覆盖默认主题时如何修改选中Tab的文字颜色

• 优先级冲突是核心原因：MUI的Tab组件文字内容全部包裹在.MuiTab-wrapper子节点内，你直接给wrapper配置项设置了color: "black"，这是直接作用于文字所在节点的样式；而selected配置项是作用于Tab根节点（.MuiTab-root）的选中状态样式，根节点设置的color属于继承属性，优先级远低于直接作用于子节点的样式，所以继承的primary色会被wrapper的黑色直接覆盖，不会生效。
• 额外配置错误提示：你给indicator设置的color属性也不会生效，indicator下划线的颜色需要用backgroundColor配置，而不是color。

selected是MUI为Tab根节点预定义的状态类样式配置，仅当Tab处于选中状态时，该配置的样式会挂载到.MuiTab-root节点上，可用来配置根节点的背景色、边框、内外边距、过渡效果等所有根节点支持的CSS属性，也可以嵌套选择器修改选中状态下的所有子节点样式。

两种可选方案任选其一即可：

方案1：调整color配置的层级 #

把默认文字颜色从wrapper移到root配置中，让color走继承逻辑，selected的同层级color配置优先级更高，会覆盖默认值自动继承给wrapper：

MuiTab: {
  root: {
    background: "transparent",
    borderBottom: `1px solid ${colors.primary}`,
    textAlign: "center",
    color: "black", // 把默认文字颜色移到这里
  },
  selected: {
    color: colors.primary, // 此时会生效
  },
  wrapper: {
    fontSize: "16px",
    textTransform: "none",
    // 移除这里的color配置
  },
},
MuiTabs: {
  indicator: {
    backgroundColor: colors.primary, // 把color改成backgroundColor
  },
},

方案2：在selected中嵌套指定wrapper样式 #

直接提高选中状态下文字颜色的优先级，不需要调整原有配置的结构：

MuiTab: {
  root: {
    background: "transparent",
    borderBottom: `1px solid ${colors.primary}`,
    textAlign: "center",
  },
  selected: {
    '& .MuiTab-wrapper': { // 嵌套选择器直接命中文字节点
      color: colors.primary,
    }
  },
  wrapper: {
    fontSize: "16px",
    textTransform: "none",
    color: "black",
  },
},
MuiTabs: {
  indicator: {
    backgroundColor: colors.primary,
  },
},

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