Material UI 选中的Tab与其余Tab颜色显示不一致如何解决

你遇到的样式不生效、透明度不一致的问题，本质是两个原因：

1. 你写的十六进制颜色值漏写#前缀，导致设置的选中态颜色本身无法被浏览器识别生效
2. MUI默认给未选中的.MuiTab-root元素设置了opacity: 0.6的默认规则，选中态.Mui-selected默认opacity为1，你只修改了选中态的样式，没有覆盖未选中态的默认规则

方案1：使用sx属性（适配MUI v5及以上版本） #

直接在Tabs组件上配置全局样式，统一选中和未选中态的样式：

<Tabs
  value={tabValue}
  onChange={handleTabChange}
  sx={{
    // 统一所有Tab的基础样式，覆盖默认未选中态规则
    '& .MuiTab-root': {
      color: '#1D4659',
      opacity: 0.7, // 这里可以改成你需要的透明度值
    },
    // 选中态保持和未选中态一致
    '& .Mui-selected': {
      opacity: 0.7,
    }
  }}
>
  {/* 你的Tab子项 */}
</Tabs>

方案2：使用styled组件自定义 #

如果是封装自定义Tabs组件，用styled写法的逻辑和上面一致：

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

const CustomTabs = styled(Tabs)(() => ({
  '.MuiTab-root': {
    color: '#1D4659',
    opacity: 0.7,
  },
  '.Mui-selected': {
    opacity: 0.7,
  }
}))

方案3：适配MUI v4的makeStyles写法 #

如果是旧版本MUI，用makeStyles定义样式即可：

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

const useStyles = makeStyles({
  tabsRoot: {
    '& .MuiTab-root': {
      color: '#1D4659',
      opacity: 0.7,
    },
    '& .Mui-selected': {
      opacity: 0.7,
    }
  }
})

// 组件内调用
function YourComponent() {
  const classes = useStyles()
  return <Tabs className={classes.tabsRoot} {/* 其他props */} />
}

如果调整后依旧不生效，可以打开浏览器开发者工具，选中Tab元素查看已应用的样式，找到opacity规则的来源选择器，通过提升自定义样式的选择器权重，或者加!important强制覆盖即可。

内容的提问来源于stack exchange，提问作者Ap-Mich