javascript - Material 用户界面 : Style nested components in TablePagination

Question

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

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