I am trying to change the background color of the list contains the number of rows in MUI TablePagination.

<TablePagination
          style={{ color: "#b5b8c4", fontSize: "14px" }}
          classes={{selectIcon: classes.select, paper: classes.selectDropdown}}
          rowsPerPageOptions={[5, 10, 20]}
          ponent="div"
          count={data.length}
          rowsPerPage={rowsPerPage}
          page={page}
          backIconButtonProps={{
            "aria-label": "Previous Page",
            style: {color: page===0?"#b5b8c4":"#7cb5ec" },
            autoid: "pagination-button-next-collector",
          }}
          nextIconButtonProps={{
            "aria-label": "Next Page",
            style: {color: "#7cb5ec"},
            autoid: "pagination-button-previous-collector",
          }}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
          autoid="invoice-table-pagination-collector"
        />

The content of selectDropdown is,

selectDropdown: {color: "#fff", backgroundColor: "#1b1f38", },

What I want to do is something like,

But I'm getting an error

Warning: Material-UI: the key `paper` provided to the classes property is not implemented in TablePagination.
You can only override one of the following: root,toolbar,spacer,caption,selectRoot,select,selectIcon,input,menuItem,actions.

By changing the paper to `menuItem, I can achieve a similar but not satisfactory result.

This has whitespaces at top and bottom, also the focused item cannot be changed.

Thanks in advance.

I am trying to change the background color of the list contains the number of rows in MUI TablePagination.

<TablePagination
          style={{ color: "#b5b8c4", fontSize: "14px" }}
          classes={{selectIcon: classes.select, paper: classes.selectDropdown}}
          rowsPerPageOptions={[5, 10, 20]}
          ponent="div"
          count={data.length}
          rowsPerPage={rowsPerPage}
          page={page}
          backIconButtonProps={{
            "aria-label": "Previous Page",
            style: {color: page===0?"#b5b8c4":"#7cb5ec" },
            autoid: "pagination-button-next-collector",
          }}
          nextIconButtonProps={{
            "aria-label": "Next Page",
            style: {color: "#7cb5ec"},
            autoid: "pagination-button-previous-collector",
          }}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
          autoid="invoice-table-pagination-collector"
        />

The content of selectDropdown is,

selectDropdown: {color: "#fff", backgroundColor: "#1b1f38", },

What I want to do is something like,

But I'm getting an error

Warning: Material-UI: the key `paper` provided to the classes property is not implemented in TablePagination.
You can only override one of the following: root,toolbar,spacer,caption,selectRoot,select,selectIcon,input,menuItem,actions.

By changing the paper to `menuItem, I can achieve a similar but not satisfactory result.

This has whitespaces at top and bottom, also the focused item cannot be changed.

Thanks in advance.

• javascript
• reactjs
• react-native
• material-ui

1 Answer 1

The example below is a copy of the Custom Pagination Actions example from the documentation, but with the style change indicated in your question.

The changes I have done to the demo are adding your styles for the Paper background and a style for the MenuItem hover effect (otherwise the hover isn't visible):

const useStyles2 = makeStyles({
  selectDropdown: { color: "#fff", backgroundColor: "#1b1f38" },
  menuItem: {
    "&:hover": {
      backgroundColor: "#3b3f58"
    }
  }
});

To apply your selectDropdown class to the menu Paper, you use the MenuProps within the SelectProps. The menuItem style can be applied more directly (both shown below).

<TablePagination
              SelectProps={{
                MenuProps: { classes: { paper: classes.selectDropdown } }
              }}
              classes={{ menuItem: classes.menuItem }}
              ...
            />

The other change, pared to the original documentation demo, is that I removed native: true from the SelectProps (none of this custom styling approach is applicable for native select, and the example in your question is not using a native select).

Here's the full code of the sandbox:

import React from "react";
import PropTypes from "prop-types";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableFooter from "@material-ui/core/TableFooter";
import TablePagination from "@material-ui/core/TablePagination";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import IconButton from "@material-ui/core/IconButton";
import FirstPageIcon from "@material-ui/icons/FirstPage";
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
import LastPageIcon from "@material-ui/icons/LastPage";

const useStyles1 = makeStyles(theme => ({
  root: {
    flexShrink: 0,
    marginLeft: theme.spacing(2.5)
  }
}));

function TablePaginationActions(props) {
  const classes = useStyles1();
  const theme = useTheme();
  const { count, page, rowsPerPage, onChangePage } = props;

  const handleFirstPageButtonClick = event => {
    onChangePage(event, 0);
  };

  const handleBackButtonClick = event => {
    onChangePage(event, page - 1);
  };

  const handleNextButtonClick = event => {
    onChangePage(event, page + 1);
  };

  const handleLastPageButtonClick = event => {
    onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
  };

  return (
    <div className={classes.root}>
      <IconButton
        onClick={handleFirstPageButtonClick}
        disabled={page === 0}
        aria-label="first page"
      >
        {theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
      </IconButton>
      <IconButton
        onClick={handleBackButtonClick}
        disabled={page === 0}
        aria-label="previous page"
      >
        {theme.direction === "rtl" ? (
          <KeyboardArrowRight />
        ) : (
          <KeyboardArrowLeft />
        )}
      </IconButton>
      <IconButton
        onClick={handleNextButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="next page"
      >
        {theme.direction === "rtl" ? (
          <KeyboardArrowLeft />
        ) : (
          <KeyboardArrowRight />
        )}
      </IconButton>
      <IconButton
        onClick={handleLastPageButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="last page"
      >
        {theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
      </IconButton>
    </div>
  );
}

TablePaginationActions.propTypes = {
  count: PropTypes.number.isRequired,
  onChangePage: PropTypes.func.isRequired,
  page: PropTypes.number.isRequired,
  rowsPerPage: PropTypes.number.isRequired
};

function createData(name, calories, fat) {
  return { name, calories, fat };
}

const rows = [
  createData("Cupcake", 305, 3.7),
  createData("Donut", 452, 25.0),
  createData("Eclair", 262, 16.0),
  createData("Frozen yoghurt", 159, 6.0),
  createData("Gingerbread", 356, 16.0),
  createData("Honeyb", 408, 3.2),
  createData("Ice cream sandwich", 237, 9.0),
  createData("Jelly Bean", 375, 0.0),
  createData("KitKat", 518, 26.0),
  createData("Lollipop", 392, 0.2),
  createData("Marshmallow", 318, 0),
  createData("Nougat", 360, 19.0),
  createData("Oreo", 437, 18.0)
].sort((a, b) => (a.calories < b.calories ? -1 : 1));

const useStyles2 = makeStyles({
  table: {
    minWidth: 500
  },
  selectDropdown: { color: "#fff", backgroundColor: "#1b1f38" },
  menuItem: {
    "&:hover": {
      backgroundColor: "#3b3f58"
    }
  }
});

export default function CustomPaginationActionsTable() {
  const classes = useStyles2();
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(5);

  const emptyRows =
    rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = event => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  return (
    <TableContainer ponent={Paper}>
      <Table className={classes.table} aria-label="custom pagination table">
        <TableBody>
          {(rowsPerPage > 0
            ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            : rows
          ).map(row => (
            <TableRow key={row.name}>
              <TableCell ponent="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell style={{ width: 160 }} align="right">
                {row.calories}
              </TableCell>
              <TableCell style={{ width: 160 }} align="right">
                {row.fat}
              </TableCell>
            </TableRow>
          ))}

          {emptyRows > 0 && (
            <TableRow style={{ height: 53 * emptyRows }}>
              <TableCell colSpan={6} />
            </TableRow>
          )}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TablePagination
              rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
              colSpan={3}
              count={rows.length}
              rowsPerPage={rowsPerPage}
              page={page}
              SelectProps={{
                inputProps: { "aria-label": "rows per page" },
                MenuProps: { classes: { paper: classes.selectDropdown } }
              }}
              classes={{ menuItem: classes.menuItem }}
              onChangePage={handleChangePage}
              onChangeRowsPerPage={handleChangeRowsPerPage}
              ActionsComponent={TablePaginationActions}
            />
          </TableRow>
        </TableFooter>
      </Table>
    </TableContainer>
  );
}

Related (also styles the Menu Paper) answer: (material-ui) Apply max-height to <Select> children

Related documentation:

• TablePagination SelectProps: https://material-ui./api/table-pagination/#props
• Select MenuProps: https://material-ui./api/select/#props
• Menu paper CSS class: https://material-ui./api/menu/#css