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?

javascriptcssreactjsmaterial-ui

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What's the best approach for implementing TimeInput exclusively in React-Admin?

I discovered this helpful code snippet on the React-Admin documentation that allows me to input both a date and time: import { DateTimeInput } from 'react-admin'; <DateTimeInput source="published_at" /> But now I'm wonderin ...

javascriptreactjsreact-admin

Can you choose an item from a Material UI select component?

Working on a select field using TextField and MenuItem components in React with Material UI. Here's my code snippet: {data.category?.map((category) => ( <MenuItem key={category.id} value={{ id: category.id, ...

reactjsmaterial-ui

When using videojs, I have the ability to include a Text Track event handler, however, there is currently no option to remove it

I implemented a listener for the 'cuechange' event on a Text Track and it's functioning correctly. However, I am unable to figure out how to remove this listener. I have attempted the instructions below to remove the listener, but it continu ...

javascripttypescripthtml5-videovideo.js

What is the best way to capture dynamic import errors in JavaScript?

I am currently developing a website using Next.js. My goal is to utilize dynamic import import() to load a module dynamically, even if it may not exist. If the module does not exist, I am fine with suppressing it: const Blog = async () => { let L ...

javascriptnext.js

modal dropdown with overflow in ui-select

Currently, I am encountering an issue with the display of a ui-select dropdown inside a ui bootstrap modal that has overflow css set up. Whenever the ui-select dropdown is opened, the list of options appears within the modal but is partially obscured by t ...

cssangularjsoverflowangular-ui-bootstrapangular-ui-select

Tips on sending form data, including a file, to Ajax using the onclick() method

My Modal Includes a Form: <div class="modal fade bs-example-modal-lg" id="myMODALTWO" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="form-content"> <div class="modal-dialog modal-lg" role="document"> ...

javascriptphpajaxbootstrap-modal

Passing data from React Native to an Android activity: Tips and tricks

I am currently working on integrating React Native into an existing Android app, and I need to send a rowId from a ListView in React Native to a method in my Android activity. This is to facilitate further processing within the app. Any suggestions on ho ...

androidreactjsreact-native

Using angularjs to include content from other files is known as

As I delve into the concept of creating directives in AngularJS, I am faced with the imminent end of Angular 1.x and the rise of Angular 2.x. The shift seems daunting, but I am determined to bridge this gap seamlessly. In my quest for clarity, I stumbled ...

javascriptangularjs

Redux Form: Input remains untouched with `touched: false'

Looking to validate my input fields and dynamically change the CSS based on user interaction. To start, I implemented a required validation method by wrapping all input components with a <Field> tag and passing an array of functions to the validate ...

javascriptreactjsformsreduxredux-form

Using "array_agg" in a "having clause" with Sequelize

I am facing a particular scenario with my database setup. I have three tables named computers, flags, and computerFlags that establish relationships between them. The structure of the computerFlags table is as follows: computerName | flagId computer1 | ...

javascripttypescriptpostgresqlsequelize.js

After updating the state in a Reducer with Redux Toolkit, make sure to utilize a

Issue: Seeking efficient code writing methods. Here is a detailed example of my Redux Toolkit slice below: import { createSlice } from '@reduxjs/toolkit'; import { setCookie } from '../../utils/storageHandler'; const initialState = { ...

reactjstypescriptreduxredux-toolkit

What is the best way to apply the TableRow style in material-ui / mui to make it similar to TableHead?

Trying to implement TableHead styling on TableRow but encountering a warning: validateDOMNesting(...) cannot be a child of. How can this be fixed without triggering a warning message? CollapisbleTableRow.js import React, { Fragment, useCallback } from &ap ...

javascriptreactjsmaterial-uitablerowtablecell

Unable to use onSubmit with enter key in render props (React)

I am looking to include a button within a form that can trigger the onSubmit event when the user presses the Enter key. Here is an example of a functional solution: <form onSubmit={() => console.log('ok')}> <button type="submi ...

javascriptreactjsformsonsubmit

Tips on sending a list via @Input using Angular5

I was seeking guidance on how to pass a list through an input. In my parent component, I have the following: list: Hero[] = [{Id: 2, Name: "Sll"}, {Id: 3, Name: "Sldsadasd"}] and in the HTML: <app-add-hero list="{{list}}" hero={{hero}}></app-ad ...

javascriptangular

Leveraging Vue.js to showcase API information through attribute binding

My application is designed to allow a user to select a Person, and then Vue makes an API call for that user's posts. Each post has its own set of comments sourced from here. You can view the codepen here Here is my HTML structure: <script src="h ...

javascriptvue.jsaxios

Open the window by using the `Window.open` method, then find and

Is there a way to open a document, not in a new window but on the same page using JavaScript.Window.Open()? Could it be possible to display the document within a specific div element that is obtained with getElementById? For example: document.getElementB ...

javascriptajaxhtmlweb-applications

Receiving undefined when subscribing data to an observable in Angular

Currently, I am facing an issue in my Angular project where subscribing the data to an observable is returning undefined. I have a service method in place that retrieves data from an HTTP request. public fetchData(): Observable<Data[]> { const url = ...

javascriptangulartypescriptobservablesubscribe

Encountered an issue in ReactTS where a POST request to the API failed due to an unsupported media

I am looking to send data from ReactTS to an API. When testing with Postman, the data is successfully posted without any issues. API: [HttpPost] public async Task<ActionResult<Ticket>> PostTicket([FromBody]Ticket ticket) ...

reactjsapireact-tsx

Local email.js functionality successful, but fails upon deployment alongside React

I have implemented Email.js to create a contact form for a Next.js website. It functions perfectly when tested locally, but encounters issues once deployed. Upon clicking the submit button, the form fails to reset as intended within the sendEmail function. ...

javascriptreactjsemailnext.jsenvironment-variables

Styled Components do not have the ability to define :hover states

export const WatchVideoButtonWrapper = styled.div` position: absolute; bottom: 80px; right: 33px; background-color: ${(props) => props.bgColor}; color: ${(props) => props.color}; border-radius: 100px; transition: all 0.1s; ...

javascriptcssreactjsanimationstyled-components