如何解决MUI TableHead颜色被palette.text.color覆盖的问题？

问题原因 #

你直接给MuiTableHead-root设置color不会生效，因为TableHead内部的TableCell组件（尤其是head变体）本身继承了全局palette.text.primary的样式，其CSS优先级高于父容器的颜色设置。

解决方案 #

方案1：直接覆盖TableCell的head变体样式 #

通过主题配置直接针对MuiTableCell的head变体设置颜色，这是最直接的方式：

const theme = createTheme({
  palette: {
    text: {
      primary: "green"
    }
  },
  components: {
    MuiTableCell: {
      styleOverrides: {
        head: {
          color: "red"
        }
      }
    }
  }
});

方案2：通过TableHead后代选择器覆盖 #

如果需要通过MuiTableHead来统一控制，可以使用后代选择器选中内部的TableCell-head元素，提高样式优先级：

const theme = createTheme({
  palette: {
    text: {
      primary: "green"
    }
  },
  components: {
    MuiTableHead: {
      styleOverrides: {
        root: {
          "& .MuiTableCell-head": {
            color: "red"
          }
        }
      }
    }
  }
});

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