⇨ Click here for the Table of Contents of Laravel articles

This article discusses how to change the color of the text in React MaterialUI pagination.

What is MaterialUI?

It is a UI component for React.

It contains a large number of Material Design-style components, making it very convenient.

This article is a summary of the official documentation

Verification environment

"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.58",
"next": "10.0.5",

Changing the color of the text in pagination

There was an answer on Stackoverflow,

Apparently, it seems that it is not possible to override the root, and the style is applied to the child selector.

Stackoverflow article

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

const useStyles = makeStyles(theme => ({
  ul: {
    "& .MuiPaginationItem-root": {
      color: "#fff",
    },
  },
}))

const Post = () => {
  ;<Pagination
    classes={{ ul: classes.ul }}
    count={10}
    variant="outlined"
    color="secondary"
  />
}

export default Post

It turned white!!!!!!!!

Conclusion

What did you think?

I changed the color of the Material UI pagination text!!!

However, when you cannot override the root in the same way, it seems necessary to do it like this.

If you have any comments or typos, please contact me via Twitter DM.

Popular Articles

Deploying a PHP7.4 + Laravel6 project to AWS EC2

Related Articles

Making an "Angry Face Rating App" with ReactNative + CloudVision