无法弄清楚如何设计材质 ui 数据网格

Question

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

此处的文档：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 函数吗？

Answer 1

因此，经过一番折腾，我认为问题在于 DataGrid 组件不支持 classes 属性（似乎大多数材质 ui 组件都支持）。我相信 withStyles 用法 about 是通过 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} />
   ...
  )
}