样式化 MUI DataGrid 的特定列答案

【问题标题】：Styling specific column of the MUI DataGrid样式化 MUI DataGrid 的特定列
【发布时间】：2022-01-05 02:56:48
【问题描述】：

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

GridComponent.js

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

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>
  );
}

style.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()，但我无法找到/理解仅更改一列的 justify-content 的方法。

谢谢，

【问题讨论】：

可能是因为您正在使用renderCell 方法手动渲染最后一列参数，因此请尝试将className 直接添加到IconButton 而不是将其作为属性提供！
@RegarBoy 谢谢，我试过了，但没有解决问题。通过我的实现，我可以看到它被覆盖了，但是在尝试您所说的内容时，它甚至没有使用浏览器调试器显示出来。

标签： css reactjs material-ui mui-datatable

【解决方案1】：

您尝试过使用 Grid MUI 吗？在我看来，Grid 比 DataGrid 更好，这就是为什么：

GRID MUI 提供了很多自定义功能，请参见下面的示例

<Grid
  container
  direction="row"
  justifyContent="center" 
  alignItems="center"
>
 <Grid item xs={6}>
    <Item>1</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>2</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>3</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>4</Item>
  </Grid>
</Grid>

注意：您可以将 alignItems 、 justifyContent 属性应用于网格子项，即 grid.item

有关更多信息，请访问 MUI Grid 文档：- https://mui.com/components/grid/

【讨论】：

但这并不能回答问题/问题。