MUI TableHead 颜色被 palette.text.color 覆盖

【问题标题】：MUITableHead color overriden by palette.text.colorMUI TableHead 颜色被 palette.text.color 覆盖
【发布时间】：2023-02-26 02:53:45
【问题描述】：

我想为 TableHead 单元格和 TableBody 单元格使用不同的颜色。我已经为两者添加了自定义主题，但是 TableHead 颜色被 palette.text.color 覆盖了。

我怎样才能解决这个问题？

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

工作示例：https://codesandbox.io/s/focused-northcutt-nbstkr

谢谢

【问题讨论】：

标签： reactjs material-ui mui5

【解决方案1】：

如果目标是从 theme 覆盖表头单元格的 color，请尝试在 MuiTableCell 而不是 MuiTableHead 上覆盖样式。

MuiTableCell 下有一个 head 属性，用于将任何样式附加到标题上的单元格。

在这里测试分叉演示：codesandbox

例子：

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

【讨论】：