CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Paul Redmond
Paul Redmond

Reputation: 3296

Material UI: Style nested components in TablePagination

How do I style in the buttons with the actions panel of the TablePagination component?

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

Upvotes: 2

Views: 1013

Answers (1)

Morta1
Morta1

Reputation: 619

You can simply add style to the IconButton itself : 

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

Here's an example of all red buttons

You can also use the class of the button to change it's style:

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

Upvotes: 2

Related Questions