Javascript React admin：如何在使用<；Datagrid>；？

我不熟悉

React

我正在使用

创建一个表，我只想将第一列的值居中，但我尝试了几种方法，但无法管理如何操作：

---

不幸的是，这并不起作用。

重要的是要注意这一点：

• react admin

  基于

  material ui

  呈现几乎所有（如果不是全部）的组件
• 要设置

  react admin

  组件的样式，您需要使用所有组件上存在的

  className

  道具（继承自

  materialui

  ）

您可以通过以下两种基本方式完成此操作：

材质ui样式：

从'@material ui/core'导入{createStyles，makeStyles}；
const useStyles=makeStyles（（）=>
创建样式({
根目录：{
宽度：“500px”，
},
布尔：{
宽度：“100%”，
textAlign:'中心'，
},
原因:{
textAlign:'中心'，
},
}),
);
export const YourComponent=props=>{
const classes=useStyles（）；//初始化样式
返回(
欣赏它的动态


常规CSS样式：

在您的
src/index.js
中，您可能有如下内容或略有不同：

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
import./index.css'；//这是您感兴趣的行（更新它以调用您的css文件）
ReactDOM.render（或者，您会注意到，您甚至可以根据一些react/javascript逻辑来设计组件的样式，这是非常有趣的东西。
这里详细介绍了如何为Datagrid组件执行此操作：
建议使用以下属性：headerClassName/cellClassName

import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
  table: {
    width: '500px', 
  },
  bool: {
    width: '100%',    
    textAlign: 'center',
  },
  reason: {
    textAlign: 'center',
  },    
});


const classes = useStyles();
...
<ArrayField source="bans" reference="bans" >
  <Datagrid classes={{ table: classes.table }}>
    <BooleanField
      label="isBanned"
      source="isBanned"        
      headerClassName={classes.bool}
      cellClassName={classes.bool} 
    />
    <ReasonsField
      source="reason"
      label="reason"
      headerClassName={classes.reason}
      cellClassName={classes.reason} 
    />
  </Datagrid>
</ArrayField>
...

从'@material ui/core'导入{makeStyles}；
const useStyles=makeStyles({
表:{
宽度：“500px”，
},
布尔：{
宽度：“100%”，
textAlign:'中心'，
},
原因:{
textAlign:'中心'，
},    
});
const classes=useStyles（）；
...
...
在回答中，你试过这两个选项吗？@MwamiTovi我使用了第一个选项，即材质ui样式，因为它更符合现代方法OK，听起来不错