React-admin：如何在使用 <Datagrid> 时将列居中？答案

【问题标题】：React-admin: How do I center a column while using the <Datagrid>?React-admin：如何在使用 <Datagrid> 时将列居中？
【发布时间】：2021-03-29 09:06:58
【问题描述】：

我是React 的新手。

我正在使用<dataGrid> 创建一个表，我只想将第一列的值居中，但我尝试了几种方法，但无法管理如何做到这一点：

<ArrayField source="bans" reference="bans" >
    <Datagrid style={{ width: '500px' }}>
       <BooleanField
          label="isBanned"
          source="isBanned"
          style={{ width: '100%', alignText:'center'}}
       />
       <ReasonsField
          source="reason"
          label="reason"
          style={{ textAlign: 'center' }}
       />
   </Datagrid>
</ArrayField>

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

【问题讨论】：

您是否尝试过任何一个选项？
@MwamiTovi 我使用了第一个选项，材质 ui 样式，因为它更坚持现代方法
好的，听起来不错

标签： javascript react-native react-admin

【解决方案1】：

注意这一点很重要：

react-admin 基于 material-ui 呈现几乎所有（如果不是全部）它的组件。
要设置react-admin 组件的样式，您需要使用存在于所有组件上的className 属性（继承自material-ui）。

您可以通过以下两种基本方式做到这一点：

Material-ui 样式：

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

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

export const YourComponent = props => {
   const classes = useStyles();  // initialize the styles

   return (
     <ArrayField source="bans" reference="bans" >
       <Datagrid className={classes.root}>
         <BooleanField label="isBanned" source="isBanned" className={classes.bool} />
         <ReasonsField label="reason" source="reason" className={classes.reason} />
       </Datagrid>
     </ArrayField>
   );
};

您可以阅读更多关于 material-ui styling 的信息以了解它的动态。

普通 CSS 样式：

在您的src/index.js 中，您可能有类似或稍有不同的内容：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css'; // this is the line of interest (update it to call your CSS file)
 
ReactDOM.render(<App />, document.getElementById('root'));

在您的 CSS 文件中（对于本示例，src/index.css）

/* i've used css classes */
.column {
   width: 500px;
}
.centered {
   text-align: center;
}
.wide {
   width: 100%;
}

在您的组件内（感兴趣的）：

import clsx from 'clsx'; // install this "clsx" package - an alternative is "classnames"

export const YourComponent = props => {

   return (
     <ArrayField source="bans" reference="bans" >
       <Datagrid className={clsx('column')}>
         <BooleanField label="isBanned" source="isBanned" className={clsx('centered', 'wide')} />
         <ReasonsField label="reason" source="reason" className={clsx('centered')} />
       </Datagrid>
     </ArrayField>
   );
};

如果您阅读更多关于 clsx 或 classnames 的信息，您会注意到您甚至可以根据一些 react/javascript 逻辑来设置组件样式 - 非常有趣的东西。

【讨论】：

【解决方案2】：

这里详细描述了如何为 Datagrid 组件执行此操作： https://marmelab.com/react-admin/List.html#css-api-1 建议使用属性：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>
...

【讨论】：