设置 MUI DataGrid 特定列的样式

Question

我想将一个位于 DataGrid 选项卡内的 IconButton 居中（它们都是 MUI 组件）。我已阅读文档并尝试了几件事。在我上次的尝试中，我这样做了：

GridComponent.js

我在这里所做的是将“like-grid-button”分配给我感兴趣的列（likebutton）的cellClassName。

import { DataGrid } from '@material-ui/data-grid';
import { randomCreatedDate } from '@mui/x-data-grid-generator'; //for examples
import FavoriteBorderRoundedIcon from '@mui/icons-material/FavoriteBorderRounded'; //fav icon shape
import { IconButton } from '@material-ui/core';
import React from 'react';

const ActivityTypes = ['Museum', 'Restaurant', 'Sight Seen', 'Shoping'];
const rows = [
  { id: 1, Name: 'Gamla Stan', Type: 'Sight Seen', date: randomCreatedDate() },
  { id: 2, Name: 'Vasamuseet', Type: 'Museum', date: randomCreatedDate() }
];

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'Name', headerName: 'Name', width: 130 },
  {
    field: 'Type',
    headerName: 'Type',
    type: 'singleSelect',
    valueOptions: ActivityTypes,
    width: 130
  },
  {
    field: 'date',
    headerName: 'Date',
    type: 'date',
    width: 130
  },
  {
    field: 'likebutton',
    headerName: 'Favourite',
    sortable: false,
    width: 130,
    cellClassName: 'like-grid-button',
    renderCell: (params) => {
      return (
        <IconButton index={params.row.id}>
          <FavoriteBorderRoundedIcon />
        </IconButton>
      );
    }
  }
];

export default function DataTable() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        disableColumnSelector
        disableSelectionOnClick
        checkboxSelection
      />
    </div>
  );
}

样式.css

在这里，我刚刚在“like-grid-button”类中添加了我想要的内容

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

index.js 在这里我添加了<StyledEngineProvider injectFirst>所以 MUI 不会覆盖样式。然而，当我测试这个时，它无论如何都会被覆盖。

import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';
import StyledEngineProvider from '@mui/material/StyledEngineProvider';
import App from './App';

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </StyledEngineProvider>,
  document.getElementById('root')
);

我还尝试了其他方法，例如使用，makeStyles()但我找不到/理解一种方法来更改仅一列的对齐内容。

谢谢你，

Answer 1

你应该能够将其包装IconButton在

<Box sx={{display: "flex", justifyContent: "center", alignItems: "center"}}>
  .....
</Box>

如果使用 Material UI 4 或更低版本，请替换sx为style