覆盖 MaterialUI 的 TablePagination 的 MenuItem 的 CSS答案

【问题标题】：Override CSS for MaterialUI's TablePagination's MenuItem覆盖 MaterialUI 的 TablePagination 的 MenuItem 的 CSS
【发布时间】：2018-05-24 11:58:42
【问题描述】：

我不知道如何覆盖 TablePagination 的子组件 MenuItem 的 CSS：

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/TablePagination/TablePagination.js

我将组件用作：

<TablePagination 
    colSpan={2}
    count={2} 
    rowsPerPage={2} 
    classes={{
        root: classes.root, caption: classes.caption 
    }} />

在这里，将样式传递给 MenuItem 似乎很棘手。您能否提出一些解决方案？

似乎新版本的 material-ui 支持这个：https://github.com/mui-org/material-ui/pull/11200/files。但只是想知道如果我不能升级我该怎么办......

谢谢！

【问题讨论】：

标签： javascript material-ui

【解决方案1】：

找到了一种解决方法。基本上它是通过创建一个 SelectProps 对象来完成的：

selectProps = {
    MenuProps: {
        classes: {
            paper: "bar"
        }
    }
};

然后在 TablePagination 用法中我使用它：

<TablePagination SelectProps={this.selectProps} />

这为 select 的父元素提供了一个名为“bar”的 CSS 类。然后我只覆盖“bar”的 CSS。

【讨论】：