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

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

将以下样式添加到

sx

 的 

DataGrid

属性中

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

Answer 6

材质-UI 数据网格 v7

import { styled } from '@mui/system';
import { DataGridPro } from '@mui/x-data-grid-pro';

function DataGridGeneric(props) {
    return (
        <CustomDataGridPro
            disableColumnMenu
            {...props}
        />
    );
}

export default DataGridGeneric;

const CustomDataGridPro = styled(DataGridPro)(({ theme }) => ({
    '& .MuiDataGrid-columnSeparator': {
        display: 'none'
    }
}));

附注v7 对我有用，希望有帮助🙏🏻