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/