Material-UI 覆盖 .MuiDataGrid-columnsContainer CSS答案

【问题标题】：Material-UI Override .MuiDataGrid-columnsContainer CSSMaterial-UI 覆盖 .MuiDataGrid-columnsContainer CSS
【发布时间】：2021-03-11 05:00:20
【问题描述】：

我正在尝试覆盖 .MuiDataGrid-columnsContainer 上的 CSS 属性 position。查看https://material-ui.com/api/data-grid/#css 时，您会看到root 有规则，但.MuiDataGrid-columnsContainer 没有规则。我已阅读有关覆盖 CSS 属性的文档，但似乎无法让它适用于该类。

通常我会利用规则并执行以下操作

const useStyles = makeStyles({
  paper: {
    background: '#010310',
  }
});

然后返回类似这样的东西

const classes = useStyles();

return (
  <DataGrid classes={{ paper: classes.paper }} />
);

但是，当我将 makeStyles 和 return 中的单词 paper 替换为 columnsContainer 时，它不起作用。

无法正常工作的可能原因

根据数据网格的 CSS 文档（上面的链接），唯一的 Rule 是 root，由于 .MuiDataGrid-columnsContainer 没有 Rule，所以我需要以不同的方式进行操作。不幸的是，我还没有找到另一种有效的方法。

感谢我得到的任何帮助，谢谢！

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

您可以为要覆盖的类赋予内联样式并为其赋予一个 !important 标志。

例如，如果您要覆盖的类是 .MuiDataGrid-columnsContainer，那么您可以简单地执行此操作。

 .MuiDataGrid-columnsContainer{
         position:  relative !important; // to override the default css property
}

【讨论】：

【解决方案2】：

对于MuiDataGrid-columnsContainer 的本地覆盖，正如您在api doc 上看到的那样，您必须将您的css 传递给root 类。所以：

<DataGrid classes={{ root: classes.root }} />

现在，如果您想特别覆盖 MuiDataGrid-columnsContainer，请在您的 makeStyles 中写下如下内容：

const useStyles = makeStyles({
  root: {
    "&.MuiDataGrid-columnsContainer":{
        background: '#010310',
    }
  }
});

就是这样。

【讨论】：

这对我不起作用。你能链接一个工作沙箱吗？

【解决方案3】：

root: {
            "& .MuiDataGrid-root": {
                color: `#fff`
            },
            "& .MuiIconButton-label": {
                color: `#fff`
            }
        },

我把这个"& .MuiDataGrid-root" 放在我的主布局中，效果很好。

   const useStyles = makeStyles(() => ({
    root: {
        display: 'flex',
        "& .MuiDataGrid-root": {
            color: `#fff`
        },
        "& .MuiIconButton-label": {
            color: `#fff`
        }
    },
    appBar: {
        backgroundColor:'#181745',
        color:theme.palette.primary.main,
        zIndex: theme.zIndex.drawer + 1,
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
    },
}))

【讨论】：