更改 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-selected:hover。

要覆盖它们，您必须在挂钩中使用带有所谓的 $ruleName 的父引用makeStyles。如果您对它的工作原理更感兴趣，这里有来自 @Ryan Cogswell 的非常好的解释。

这看起来像这样：

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>;

对于复选框，您只需添加colorprop 即可更改它：

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

对于您的Toolbar，您只需更改highlight您内部提供的类useToolbarStyles即可使事情正常工作：

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
        },
}));

现场演示：