我是这样做的：

const StyledDataGrid = styled(DataGrid)(() => ({
  '& .MuiDataGrid-iconButtonContainer': {
    marginLeft: '2px',
    visibility: 'visible !important',
    width: 'auto !important',
  },
}))

字符串
我创建了一个样式化组件，它为DataGrid添加了一些自定义样式。特别是总是显示图标并占用它的宽度。不推荐使用 ！important，但在这种情况下不会造成伤害。
我必须补充，这只适用于使用自定义排序图标，像这样：

<StyledDataGrid
  components={{
    ColumnSortedAscendingIcon,
    ColumnSortedDescendingIcon,
    ColumnUnsortedIcon,
  }}
/>

型
如果你不想使用自定义图标，我相信这是可行的，你只需要多玩CSS。

你可以像这样在DataGrid中使用sx prop：

<DataGrid
    sx={{
      '.MuiDataGrid-iconButtonContainer': {
        visibility: 'visible',
      },
      '.MuiDataGrid-sortIcon': {
        opacity: 'inherit !important',
      },
    }}

字符串
在我的例子中，我必须对iconButtonContainer和sortIcon进行样式设置，以确保它始终可见。

你可以使用.MuiDataGrid-iconButtonContainer。但是Material-UI没有为未排序列表提供默认图标。我已经分叉了你的演示并更新了它。也添加了未排序列表的图标。请检查codesandbox

在.scss文件中添加以下代码。（.MuiDataGrid-sortIcon是Mui Datagrid的预定义类）。希望对您有帮助！

.MuiDataGrid-sortIcon {
 opacity: inherit !important;
}

字符串

这就是我所做的，（使用样式组件库的样式）

const StyledDataGrid = styled(DataGrid)((theme) => ({
    "& .MuiDataGrid-sortIcon": {
        opacity: 'inherit !important',
      },
      
    "& .MuiDataGrid-iconButtonContainer": {
        visibility: 'visible',
    }
    }));

字符串
然后在代码中使用它

< StyledDataGrid rows={rows} columns={columns} />

型
希望能帮上忙。