材料-UI v4（或v5）

我通过创建一个样式类（使用makeStyles()）来实现这一点，例如

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

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

headerClassName: classes.hideRightSeparator

材料-UI v5

由于DataGrid支持sx prop，因此可以使用类似于

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

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

headerClassName: 'hideRightSeparator'

对于这个问题，我有一个稍微不同的解决方案。在项目的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，分隔符是列标题元素的 * 后代 *，您可能希望保留列标题中的其他内容以供显示。

我们可以覆盖以下类：

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

将以下样式添加到DataGrid的sx属性

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

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