Material-UI DataGrid 隐藏特定单元格的标题分隔符答案

【问题标题】：Material-UI DataGrid hide header separator for specific cellsMaterial-UI DataGrid 隐藏特定单元格的标题分隔符
【发布时间】：2021-05-20 18:31:37
【问题描述】：

有没有办法隐藏特定（或所有）单元格的标题列分隔符？

这是我的列定义

    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>
            ),
        },
    ]

【问题讨论】：

标签： reactjs datagrid material-ui

【解决方案1】：

我通过创建类似的样式类来实现这一点

hideRightSeparator: {
    '& > .MuiDataGrid-columnSeparator': {
        visibility: 'hidden',
    },
},

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

headerClassName: classes.hideRightSeparator

【讨论】：

【解决方案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，分隔符是列标题元素的后代。您可能希望保留列标题中的其他内容以供显示。

【讨论】：

【解决方案3】：

我们可以覆盖下面的类：

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

【讨论】：