无法将材料ui数据表列(表头)编辑为文本居中对齐(React)

Question

在这个数据表中，我只将行和列标记为简单的变量，所以我不能用"style=｛｛textAlign：center｝｝"赋予它们样式，我尝试添加css文件，但在使用这个材料ui表时，它对tr或th都不起作用，所以我不太确定如何做到…这是我的代码

import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';
export default function DataTable({data, someColumns}) {
const columns = someColumns


const rows = data;

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

默认情况下，列中的数据是左对齐的，而不是居中的。我如何更改它？

编辑：我已经设法用这个css修复了它。感谢fahad

.MuiDataGrid-colCellTitle {
display: block; 
text-align:center; 
width: 100%; 
}
.MuiDataGrid-cell {
display: block;
position: relative;
text-align: center;
}

这将使行和列都居中。

Answer 1

对于其他遇到此问题的人，请在此处查看ColDef的实现。

"正确"做到这一点的方法是这样的：

const [columns, setColumns] = useState([
{
field: 'status',
width: 130,
// these properties can only be 'left' | 'center' | 'right'
// note that these only set text-align property.
headerName: 'Status',
headerAlign: 'center',
align: 'center',
renderCell: (params) => {
return (
<Chip label={params.value} />
)
}
},
]);

如果您呈现的是文本以外的任何内容(如上面的示例(，它将不会使您的内容居中。单元格是display: flex和align-items: center，但要水平居中，需要为居中单元格添加一个justify-content：

.MuiDataGrid-cellCenter {
justify-content: center;
}

如果需要，可以对MuiDataGrid-cellLeft或MuiDataGrid-cellRight执行相同操作。

Answer 2

这对我有效。

在style.css中，您可以通过这个属性CCD_ 7。因此，要将其居中对齐，请使用此

样式.css

.MuiDataGrid-colCellTitle {
display: block;
text-align:center;
width: 100%;
}

导入东西后

import { DataGrid } from '@material-ui/data-grid';

声明函数内部的行和列数据。

export default function DataGridDemo() {
const columns = [
Data in columns
];
const rows = [
Data in rows
];

//Apply your styles
return (
<div
style={{
height: 400,
width: "100%",
backgroundColor: "red",
textAlign: "center"
}}
>
<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
</div>
);
}

代码沙盒链接：https://codesandbox.io/s/thirsty-leaf-izuhd?file=/src/App.js