材质UI：TablePagination中的样式嵌套组件

Question

如何使用actions组件的TablePagination面板在按钮中设置样式？

import { withStyles } from '@material-ui/core';
import MuiTablePagination from '@material-ui/core/TablePagination';

const styles = {
  root: {
    color: 'rgba(0, 0, 0, 0.87)',
    backgroundColor: '#b1c4cd',
    display: 'flex',
    justifyContent: 'center',
    fontSize: '14px',
    width: '100%'
  },
  actions: {
    button: {
      color: 'yellow' // not working
    },
    MuiButtonBase: {
      color: 'yellow' // not working
    }
};

export const StyledTablePagination = withStyles(styles)(MuiTablePagination);

Answer 1

您可以简单地向IconButton本身添加样式：

const PaginationTheme = withStyles({
  actions:{
    color:'red'
  }
})(TablePagination);

以下是所有red buttons

的示例

您还可以使用按钮的类来更改其样式：

const PaginationTheme = withStyles({
  actions: {
    '& .MuiButtonBase-root:not([disabled])':{
      color: "red"
    }   
  }
})(TablePagination);