Material UI Data Grid：有没有办法右对齐整列？

Question

我是 Material UI 的新手，一直在尝试解决这个问题。

在 Material UI 中，有没有办法让数据网格中有两列，一列左对齐，一列右对齐？到目前为止，我已经能够左右对齐标题，但我这样做的方式似乎将单元格留在了后面。

import * as React from "react";
import { DataGrid } from '@material-ui/data-grid';

const columns = [
    { field: 'id', headerName: 'Column 1', align: "left", headerAlign: "left", width: "50%" },
    { field: 'data', headerName: 'Column 2', align: "right", headerAlign: "right", width: "50%" },
  ];

const rows = [
  { id: 1, data: 'asdfasdf'},
  { id: 2, data: '12951d'}, ];


function DataTable () {

    return (
        <div style={{ height: 400, width: '100%' }}>
          <DataGrid  rows={rows} columns={columns} pageSize={5} />
        </div>
      );
    
}

export default DataTable;

如您所见，我的做法是将每列的宽度设置为 50%。这实际上适用于标题，但格式不会传递到单元格。有什么办法可以做到吗？

沙盒：https://codesandbox.io/s/material-demo-forked-gcvi8?file=/demo.js

Answer 1

您可以使用自定义 CSS，以便将级联列的宽度增加到 100%。

.MuiDataGrid-renderingZone, .MuiDataGrid-root .MuiDataGrid-row {
  width: 100% !important;
}

我使用!important 覆盖由 ReactJS 添加的内联 CSS。如果您参考 ReactJS 文档，可能会有内置的解决方案。

Codesandbox 演示： https://j0geb.csb.app/