Material UI 分页变色

Question

我正在尝试做一些分页，这在理论上是可行的，但是轮廓和数字的颜色是黑色的，而且我的背景很暗所以我花了一段时间才意识到它在工作，因为我一开始看不出来

我正在尝试更改这些部分的颜色（或至少更改数字的颜色），但是，这不起作用。我尝试遵循不同的建议（包括 <PaginationItem>），但 none 正在做这项工作。有人有什么建议吗？哪里出了问题？提前致谢！

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

首先，您声明了 class selected 但使用了 classes.root。

其次，将样式分配给 root 不会覆盖项目的颜色。为此，您需要使用子选择器：.MuiPaginationItem-root (source)

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

Material UI 分页变色

Material UI pagination changing color

pagination

colors

styling

reactjs

material-ui