Material UI 分页改变颜色

Question

我正在尝试进行一些分页，理论上这是可行的，但轮廓和数字的颜色显示为黑色，而且我的背景很暗，所以我花了一段时间才意识到它正在发挥作用，因为我看不到它首先。

我正在尝试更改这些部分的颜色（或至少更改数字的颜色），但是，这是行不通的。我尝试遵循不同的建议（包括<PaginationItem>），但没有一个能完成这项工作。有人有什么建议吗？出了什么问题？先感谢您！

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

const useStyles = makeStyles((theme) => ({
    selected: {
        color:'#ffffff',
    },
}));

const Paginations = ({ scientistQuestions, paginate, scientistsPerPage }) => {
   const classes = useStyles();

   const pageNumbers = [];
   for (let i = 1; i <= Math.ceil(scientistQuestions / scientistsPerPage); i++) {
       pageNumbers.push(i)
   }
   console.log(pageNumbers)
   const handlePage = (e) => {
       paginate(Number(e.target.innerText));
   }
    
    return ( 
        <div>
            <Pagination  className={classes.root} count={3} variant="outlined" onClick={(e)=> handlePage(e)} color="primary"  />
        </div>      
    );
}
 
export default Paginations;

Answer 1

首先，您声明了一个类selected但使用了classes.root.

其次，指定样式root不会覆盖项目的颜色。为此，您需要使用子选择器.MuiPaginationItem-root：（来源）

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

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

https://codesandbox.io/s/matreial-ui-pagination-item-style-ign5e?file=/demo.tsx