Material UI 分页更改颜色。

Question

我正在尝试分页，理论上是有效的，但是轮廓和数字的颜色是黑色的，而我的背景非常暗，所以我花了一段时间才意识到它在起作用，因为一开始看不见。我尝试改变这些部分的颜色（或者至少改变数字的颜色），但是这并没有奏效。我已经尝试了不同的建议（包括），但是都没有达到想要的效果。有人有什么建议吗？或者知道哪里出了问题吗？谢谢！

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;

- AOJ

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

- Mosh Feu

---

哦，谢谢！是的，这里的“根/选择”是一个编辑错误，因为我之前尝试了两种语法。非常感谢您的澄清。 - AOJ

当然，没问题。祝好运！ - Mosh Feu

救命稻草！需要相同的用户界面，但不同的颜色 <3 - gneric

如何更改活动li的背景，因为这会改变非活动li的背景颜色。 - undefined

Answer 2

这是更新版本，适用于使用最新版mui的任何人

MuiPagination: {
    styleOverrides: {
        root: {
            button: {
                color: '#fff',
            },
        },
    },
}

- Sam - OnePunchManTwo

---

谢谢你！ - MaylorTaylor

Answer 3

您可以使用CSS或SASS来改变颜色。

.MuiPagination-root {
  button {
    color: red !important;
 }
}

- Fakhar Abbas