无法弄清楚如何设置材质ui datagrid的样式答案

【问题标题】：Can't figure out how to style material ui datagrid无法弄清楚如何设置材质ui datagrid的样式
【发布时间】：2021-06-28 15:55:43
【问题描述】：

我正在尝试设置 material-ui DataGrid 组件的样式以证明单元格中的内容。我正在阅读有关样式的材料 ui 文档，但我似乎做得不正确，坦率地说，我发现有关样式的文档 very 令人困惑。

这里的文档：https://material-ui.com/customization/components/#overriding-styles-with-classes 暗示我应该能够做这样的事情：

const StyledDataGrid = withStyles({
  cellCenter: {
    justifyContent: "center",
  },
})(DataGrid);

<div style={{ height: 300, width: '100%' }}>
  <StyledDataGrid rows={rows} columns={columns} />
</div>

但是，当我这样做时，我没有看到样式被添加到 MuiDataGrid-cellCenter DOM 元素中。附上显示元素类的屏幕截图。在检查器中，我看到没有添加样式（如果我手动添加它，我会得到想要的结果）。我没有正确使用 withStyles 函数吗？

【问题讨论】：

标签： material-ui

【解决方案1】：

因此，经过一番折腾，我认为问题在于 DataGrid 组件不支持 classes 属性（似乎大多数材料 ui 组件都支持）。我相信 withStyles 的用法是通过 classes 属性传递类的简写。由于该道具未在 API https://material-ui.com/api/data-grid/ 中列出，我假设这就是它不起作用的原因。我确认可以通过结合使用 className 参数和后代选择来使样式正常工作。

如果有人确定我错了，并且有办法让 withStyles 处理此组件，请发表评论。

const useStyles = makeStyles({
  root: {
    "& .MuiDataGrid-cellCenter": {
      justifyContent: "center"
    }
  }
});

... 

export default function X() {

  const classes = useStyles();

  return (
   ...
   <DataGrid className={classes.root} checkboxSelection={true} rows={rows} columns={columns} />
   ...
  )
}

【讨论】：