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

Question

我是 React 的新手。

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

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

不幸的是，这不起作用。

Answer 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 or classnames 的内容，您会注意到您甚至可以根据一些 react/javascript 逻辑来设计您的组件 - quite 有趣的东西。

Answer 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>
...

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

React-admin: How do I center a column while using the <Datagrid>?

javascript

react-native

react-admin