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

(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

Answer 2

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

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

Answer 3

这是为使用最新版本 mui 的任何人提供的更新版本

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

Answer 4

我对分页也有同样的问题。您可以修改该类： '.Mui-selected' 并使用 !Important 进行设置。 找到下面我的例子：

import * as React from 'react';
import Pagination from '@mui/material/Pagination';

export default function PageNav() {
    const main = {
            '& .Mui-selected': {
                bgcolor:'#B88E2F !Important' ,
            },
        }
    
  return (
      <Pagination count={3} shape="rounded" size="large" sx = {main} />
  );
}