Custom prev/next Pagination icon background color with Material UI

user_5524590 0
Viewed 3057

I want to add a background color to the MUI Pagination prev and next icons but the MUI exposes only the Pagination element that doesn't seem to take a style object and apply it to the icons but to the Pagination as a whole.

Here's what I tried first:

const useStyles = makeStyles(() => createStyles({
  page: {
    padding: '0',
  },
  icon: {
    borderRadius: '16px',
    padding: '0 6px',
    backgroundColor: '#b74d3e',
    width: '100%',
    height: '100%',
    color: '#fff',
  },
}));

const classes = useStyles();

Applying it to Pagination like

<div className={`${classes.page} ${classes.icon}`}>
  <Pagination count={16} />
</div>

resulted in all the styles rules applied to the whole Pagination element. The second go was attempt to use the PaginationItem element which seem to require a custom element (component) to display it on the screen. I'm not sure how to provide one and if it's needed to change the icon background color only.

<Pagination
  count={16}
  renderItem={() => (
    <PaginationItem
      component={}
      classes={{
        page: classes.page,
        icon: classes.icon,
      }}
    />
  )}
/>

An empty component returns an error and React's Link didn't pass for a valid one.

How do I change the prev and next arrow icon background color?

material-ui reactjs
1 Answers

The easiest way to determine how to style these elements is to inspect them in the browser developer tools to see what CSS classes are applied to these elements which could be used for controlling style overrides. In this case, MuiPaginationItem-icon seems to be the class you want to target.

Here is a working example:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Pagination from "@material-ui/lab/Pagination";

const useStyles = makeStyles((theme) => ({
  root: {
    "& > *": {
      marginTop: theme.spacing(2)
    },
    "& .MuiPaginationItem-icon": {
      backgroundColor: "yellow"
    }
  }
}));

export default function BasicPagination() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Pagination count={10} />
      <Pagination count={10} color="primary" />
      <Pagination count={10} color="secondary" />
      <Pagination count={10} disabled />
    </div>
  );
}

Edit Pagination icon background

Another syntax option is to leverage withStyles to create a customized version of Pagination:

import React from "react";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import MuiPagination from "@material-ui/lab/Pagination";

const useStyles = makeStyles((theme) => ({
  root: {
    "& > *": {
      marginTop: theme.spacing(2)
    }
  }
}));

const Pagination = withStyles({
  root: {
    "& .MuiPaginationItem-icon": {
      backgroundColor: "yellow"
    }
  }
})(MuiPagination);

export default function BasicPagination() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Pagination count={10} />
      <Pagination count={10} color="primary" />
      <Pagination count={10} color="secondary" />
      <Pagination count={10} disabled />
    </div>
  );
}

Edit Pagination icon background (forked)

user_74959300
Related