Блог

Я пытаюсь выполнить разбивку на страницы, которая теоретически работает, но цвет контура и номера становятся черными, а мой фон очень темный, поэтому мне потребовалось некоторое время, чтобы понять, что это работает, потому что сначала я этого не видел.

Я пытаюсь изменить цвет этих частей (или, по крайней мере, цвет номера), однако это не работает. Я пытался следовать различным предложениям (в том числе <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;
 

Сначала вы объявили класс selected , но использовали classes.root его.

Во-вторых, присвоение стиля root не переопределяет цвет элемента. Для этого вам необходимо использовать дочерний селектор: .MuiPaginationItem-root (источник)

 const useStyles = makeStyles(() => ({
  ul: {
    "amp; .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