如何设置MUI DataGrid指定列样式 居中列内IconButton且样式不被覆盖

问题根因 #

自定义CSS类like-grid-button的权重低于MUI DataGrid默认单元格样式的权重，因此即便配置了StyledEngineProvider injectFirst，样式依然被覆盖。

方案1：提升CSS选择器权重（改动最小） #

仅需修改style.css内容，组合MUI默认单元格类提升样式优先级即可生效：

.MuiDataGrid-cell.like-grid-button {
    justify-content: center;
}

方案2：renderCell内直接布局（无样式冲突风险，最稳妥） #

无需修改任何CSS文件，直接调整GridComponent.js中点赞列的renderCell逻辑，在外层套一层满宽的flex容器实现居中：

{
  field: 'likebutton',
  headerName: 'Favourite',
  sortable: false,
  width: 130,
  renderCell: (params) => {
    return (
      <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
        <IconButton index={params.row.id}>
          <FavoriteBorderRoundedIcon />
        </IconButton>
      </div>
    );
  }
}

方案3：基于makeStyles实现（符合MUI样式规范） #

如果偏好使用MUI内置样式方案，可以按如下方式调整GridComponent.js：

1. 导入makeStyles依赖：

import { makeStyles } from '@material-ui/core/styles';

2. 定义单元格样式：

const useStyles = makeStyles({
  likeCell: {
    justifyContent: 'center',
  },
});

3. 组件内调用样式并绑定到列属性：

export default function DataTable() {
  const classes = useStyles();
  const columns = [
    // 其余列配置保持不变
    {
      field: 'likebutton',
      headerName: 'Favourite',
      sortable: false,
      width: 130,
      cellClassName: classes.likeCell,
      renderCell: (params) => {
        return (
          <IconButton index={params.row.id}>
            <FavoriteBorderRoundedIcon />
          </IconButton>
        );
      }
    }
  ];
  // 其余组件逻辑保持不变
}

以上三种方案均可实现需求，优先推荐方案2，不受MUI版本差异和全局样式规则影响，适配性最强。

内容的提问来源于stack exchange，提问作者Adrià Pagès