如何编辑儿童表格分页材料ui组件的css答案

【问题标题】：how to edit css of children tablepagination material ui component如何编辑儿童表格分页材料ui组件的css
【发布时间】：2019-02-14 11:46:52
【问题描述】：

我正在使用模态框内的表格分页，因此带有 menuItem 组件的 Select 组件位于模态框后面，我看不到它。我所要做的就是应用更高的 zIndex 来选择组件，我猜，但我不知道如何。到目前为止我做的最好的就是把颜色改成绿色。

const styles = {
    selectRoot: {
        zIndex: 1600,
        background: '#00ff00'
    }
}

<TableFooter>
    <TableRow>
        <TablePagination
            classes={{selectRoot: classes.selectRoot}}
            count={dataCount}
            rowsPerPage={rowsPerPage}
            page={page}
            onChangePage={this.handleChangePage}
            onChangeRowsPerPage={this.handleChangeRowsPerPage}
            labelDisplayedRows={({ from, to, count }) => `${from} - ${to} / ${count}`}
            labelRowsPerPage={<IntlMessages id="datatable.labelRowsPerPage" />}
        />
    </TableRow>
</TableFooter>

有人可以帮忙吗？

【问题讨论】：

重现此情况的 CodeSandbox 会很有帮助。这将使尝试和验证潜在解决方案变得更容易/更快。
这是一个沙盒，我试图在其中重现您的问题，但它工作正常：codesandbox.io/s/y0r0vvrp7v。
您是使用对话框作为模态还是直接使用模态？

标签： reactjs material-ui

【解决方案1】：

这是一个材质 UI 选择背景。您必须在 TablePagination 道具中使用 SelectProps。下面是一个例子。

<TableFooter>
<TableRow>
    <TablePagination
        count={dataCount}
        rowsPerPage={rowsPerPage}
        page={page}
        onChangePage={this.handleChangePage}
        onChangeRowsPerPage={this.handleChangeRowsPerPage}
        labelDisplayedRows={({ from, to, count }) => `${from} - ${to} / ${count}`}
        labelRowsPerPage={<IntlMessages id="datatable.labelRowsPerPage" />}
        SelectProps ={{
          MenuProps: {
            style: {zIndex: 1600}
          }
        }}
    />
</TableRow>

【讨论】：