材质UI DataGrid隐藏特定单元格的页眉分隔符

Question

是否有任何方法可以为特定(或所有(单元格隐藏标题的列分隔符？

这是我的列定义

const ordersCols = [
{ field: 'DOCDATE', headerName: 'Fecha', flex: 1 },
{ field: 'DOCTYPE', headerName: 'Tipo', flex: 1 },
{ field: 'SOPNUMBE', headerName: 'Número', flex: 1 },
{ field: 'SUBTOTAL', headerName: 'Subtotal', flex: 1 },
{ field: 'TAXAMNT', headerName: 'Impuesto', flex: 1 },
{ field: 'DOCAMNT', headerName: 'Total', flex: 1 },
{
field: '',
renderCell: params => (
<Button
size='small'
onClick={() => onViewOrderClick(params.row)}
>
Ver
</Button>
),
},
]

Answer 1

材质UI v5

由于DataGrid支持sx道具，因此可以使用类似的东西来实现这一点

<DataGrid
sx={{
'& .hideRightSeparator > .MuiDataGrid-columnSeparator': {
display: 'none',
},
}}

并使用将类别"hideRightSeparator"设置为所需列的定义

headerClassName: 'hideRightSeparator'

材质UI v4(或v5(

可以通过创建一个类似的样式类(使用makeStyles()(来实现这一点

hideRightSeparator: {
'& > .MuiDataGrid-columnSeparator': {
display: 'none',
},
},

并使用将其分配给所需列的定义

headerClassName: classes.hideRightSeparator

Answer 2

我对这个问题有一个稍微不同的解决方案。将类似的内容添加到项目的index.css文件中(假设您有一个(：

.lastcolumnSeparator .MuiDataGrid-columnSeparator--sideRight {
display: none !important;
}

然后在您的列定义中为列：

{
/* What other values you think are important to go here. */
headerClassName: 'lastcolumnSeparator',
},

分隔符的实际CSS类是MuiDataGrid-columnSeparator--sideRight，分隔符是列标题元素的子代。您可能希望保留列标题中的其他内容以供显示。

Answer 3

我们可以覆盖以下类：

.MuiDataGrid-cell {
border-bottom: none;
}

Answer 4

将以下样式添加到DataGrid的sx道具中

<DataGrid
sx={{
'& .MuiDataGrid-columnHeader:last-child .MuiDataGrid-columnSeparator': {
display: 'none',
},
}}

来源：https://github.com/mui/mui-x/issues/4393

Answer 5

对于v5^

sx={{ '& .MuiDataGrid-columnSeparator': { display: 'none' } }}