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

Question

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

\n

这是我的列定义

\n

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

\n

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