Modifying the Color of Individual Items within the Pagination Component in MUI

Question

Modifying the Color of Individual Items within the Pagination Component in MUI

I am attempting to modify the background color of every item in my Pagination component by utilizing makeStyles.

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

const pagination = makeStyles({
  root: {
    "& .Mui-selected": {
      color: "white",
      backgroundColor: "black"
    }
  }
});

export default function App() {
  const paginationClass = pagination();

  return <Pagination count={10} page={10} className={paginationClass.root} />;
}

Here is a link to view what I have accomplished so far.

Is there a way for me to adjust the color of each Pagination Item using makeStyles?

javascript css reactjs material-ui

Answer 1

Answer №1

To give a distinct background color to individual items, you must enclose the Pagination component and define the style for the pagination using the makeStyles variable within the wrapper. Subsequently, you can manage the list of pagination elements using the CSS property :nth-of-type().

Note: The styling begins from the second element as the first and last elements represent arrows.

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

const pagination = makeStyles({
  root: {
    "& li .Mui-selected": {
      color: "white",
      backgroundColor: "black"
    },
    "& li:nth-of-type(2) .Mui-selected": {
      backgroundColor: "red"
    },
    "& li:nth-of-type(3) .Mui-selected": {
      backgroundColor: "green"
    },
    "& li:nth-of-type(4) .Mui-selected": {
      backgroundColor: "orange"
    },
    "& li:nth-of-type(5) .MuiPaginationItem-root": {
      backgroundColor: "violet"
    },
    "& li:nth-of-type(6) .MuiPaginationItem-root": {
      backgroundColor: "magenta"
    }
    ....
  }
});

export default function App() {
  const paginationClass = pagination();

  return (
    <div className={paginationClass.root}>
      <Pagination count={10} page={2} />
    </div>
  );
}

https://codesandbox.io/s/mui-how-to-change-the-color-of-each-item-in-the-pagination-component-rrd06s?file=/src/App.js

Answer 2

To give a distinct background color to individual items, you must enclose the Pagination component and define the style for the pagination using the makeStyles variable within the wrapper. Subsequently, you can manage the list of pagination elements using the CSS property :nth-of-type().

Note: The styling begins from the second element as the first and last elements represent arrows.

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

const pagination = makeStyles({
  root: {
    "& li .Mui-selected": {
      color: "white",
      backgroundColor: "black"
    },
    "& li:nth-of-type(2) .Mui-selected": {
      backgroundColor: "red"
    },
    "& li:nth-of-type(3) .Mui-selected": {
      backgroundColor: "green"
    },
    "& li:nth-of-type(4) .Mui-selected": {
      backgroundColor: "orange"
    },
    "& li:nth-of-type(5) .MuiPaginationItem-root": {
      backgroundColor: "violet"
    },
    "& li:nth-of-type(6) .MuiPaginationItem-root": {
      backgroundColor: "magenta"
    }
    ....
  }
});

export default function App() {
  const paginationClass = pagination();

  return (
    <div className={paginationClass.root}>
      <Pagination count={10} page={2} />
    </div>
  );
}

https://codesandbox.io/s/mui-how-to-change-the-color-of-each-item-in-the-pagination-component-rrd06s?file=/src/App.js

Modifying the Color of Individual Items within the Pagination Component in MUI

Answer №1

Note: The styling begins from the second element as the first and last elements represent arrows.

Similar questions

Modify the CSS style of the select label and change the color of the currently selected option in MUI

How can Angular2 detect when an entity is clicked within a window?

Tips for displaying a background image without obstructing the container class on your website

When I try to increase the date by 1 day using the MUI X Date picker, it does not update as expected

Turning a text into a JSON data structure

Issue with express-validator returning undefined value on forms set to enctype='multipart/form-data'

Display images that have been uploaded on the page either as a grid view or a list of

Delete an <li> element upon clicking a span tag

Is it possible to align the second "navbar" div inline with the first "navbar" div?

Creating a table with React components to display an object

When the clearInterval function is invoked - either when the timer is modified or when the rendering is detached from the setInterval it is linked to

Using two different colors in text with CSS

Leveraging JSON Data in Highcharts

Creating a spinning Cube with separate fields for x, y, and z rotation speeds: a step-by-step guide

Tips for boosting performance and minimizing unnecessary rerenders (Todo app case study using hooks)

Obtain an item from an array by utilizing the property with Lodash _.find

How can I transfer information from Node.js to Vue in an Nuxt.js server-side rendering setup?

Rotation of Weekly Menus

The issue with the Woocommerce quantity increment buttons not functioning properly persists after an AJAX refresh, and the automatic load feature only activates after two

What method does nosotroshq.com use to achieve the navigation effect when hovering over a menu item?