reactjs - 使用 Material UI 自定义上一个/下一个分页图标背景颜色

Question

我想为 MUI Pagination prev 和 next 图标添加背景颜色，但 MUI 仅公开Pagination似乎不采用样式对象的元素并将其应用于图标但Pagination作为一个整体。

这是我首先尝试的：

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

const classes = useStyles();

应用到Pagination喜欢

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

导致应用于整个Pagination元素的所有样式规则。第二个尝试是尝试使用PaginationItem似乎需要自定义元素 ( component) 才能在屏幕上显示的元素。我不确定如何提供，是否只需要更改图标背景颜色。

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

一个空component的返回一个错误并且 ReactLink没有通过一个有效的错误。

如何更改上一个和下一个箭头图标的背景颜色？

标签： reactjsmaterial-ui

Answer 1

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>
  );
}

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>
  );
}