material-ui - 更改 Material UI 表上选定行的颜色

Question

如何更改/自定义 Material-UI 表(排序和选择类型)中所选行的默认颜色？默认情况下，它是辅助(红色)颜色(此处的 Codesandbox: https://codesandbox.io/s/3sjxh )。如何将其更改为自定义颜色，或至少更改为主色(蓝色)，如新测试版 ( https://next.material-ui.com/components/tables/#main-content ) (v5) 中所示。

Answer 1

您必须将样式传递给 classes 属性才能更改 TableRow 的样式。

要实现background-color更改，您需要覆盖默认类:.MuiTableRow-root.Mui-selected和.MuiTableRow-root.Mui - 选定:悬停。

要覆盖它们，您必须在 makeStyles Hook 中使用带有所谓 $ruleName 的父引用。 Here is a very good explanation from @Ryan Cogswell if you are more interested how it works.

这看起来像这样:

const useStyles = makeStyles((theme) => ({
  // your other styles
  ...,
  tableRowRoot: {
    "&$tableRowSelected, &$tableRowSelected:hover": {
      backgroundColor: theme.palette.primary.main
    }
  },
  tableRowSelected: {
    backgroundColor: theme.palette.primary.main
  }
}));

...

<TableRow
  // your other props
  ...
  classes={{
    root: classes.tableRowRoot,
    selected: classes. tableRowSelected,
  }}
>
  ...
</TableRow>;

对于复选框，您只需添加 color 属性即可更改它:

<Checkbox
  // other props
  ...
  color="primary"
/>

对于您的Toolbar，您只需更改useToolbarStyles 中提供的highlight 类即可正常工作:

import { alpha } from "@material-ui/core/styles";

...

const useToolbarStyles = makeStyles((theme) => ({
  ...,
  highlight:
    theme.palette.type === "light"
      ? {
          color: theme.palette.primary.main,
          backgroundColor: alpha(
            theme.palette.primary.light,
            theme.palette.action.selectedOpacity
          )
        }
      : {
          color: theme.palette.text.primary,
          backgroundColor: theme.palette.primary.dark
        },
}));

现场演示: