How to style Pagination Item from Pagination in Material-UI, ReactJS?

user_8281276 0
Viewed 11542

Summary
Hi, everyone! In this question, I would like to ask you how to style child component when you import parent component only from material-ui.

Problem
I would like to override Pagination Item's class imported from Material-UI. I just import Pagination component from Material-UI. How can I access child component (Pagination Item component) style from Pagination component?

For example. I want to apply this style to Pagination Item component.

.Mui-selected {
  "background-color": "transparent";
  "color": "#19D5C6";
}

I have below TSX code.

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

// This style doesn't reach to Pagination Item
const useStyles = makeStyles((theme) =>
  createStyles({
    root: {
      'selected': {
        backgroundColor: 'transparent',
      },
    },
  }),
);

export default function BasicPagination() {
  const classes = useStyles();
  return (
    <Pagination count={10} className={classes.root} />
  );
}

What I have now

Design I have now

What I want to have

Design I want to make

References:

material-ui reactjs pagination
2 Answers

Mui-selected can help you with that like that:

const useStyles = makeStyles((theme) =>({
  root: {
      '& .Mui-selected': {
        backgroundColor: 'transparent',
        color:'#19D5C6',
       },
  }),
);

or (without the code up there) :

const useStyles = makeStyles((theme) =>({
  selected: {
        backgroundColor: 'transparent',
        color:'#19D5C6',
    },
  }),
);
// .... rest of code
const classes = useStyles();
return <Pagination
            count={10} 
            className={classes.root} 
            renderItem={(item)=> <PaginationItem {...item} 
                           classes={{selected:classes.selected}} />}
            />
user_88938270

Style CSS for unselected buttons

const useStyles = makeStyles((theme) =>({
      root: {
          '& ul > li:not(:first-child):not(:last-child) > button:not(.Mui-selected)': {
            backgroundColor: 'transparent',
            color:'#19D5C6',
           },
      }),
);
user_138353850
Related