reactjs - 更改分页选择/事件项目背景颜色

Question

我正在使用此控件进行分页 Link并能够得到以下结果。

我可以更改非选定/事件项目的背景颜色，但如何更改选定项目样式，如上图 8 是紫色，所以我需要它是不同的颜色。

下面是React中的JS代码

const styles = theme => ({
    paginationItemStyle: {
        marginLeft: "5px",
        color: "white"
    },
    paginationLinkStyle: {
        backgroundColor: "#b90000",
        borderRadius: "5px",

        "&:hover": {
            backgroundColor: "#772e2e",
        },

        "&:active": {
            backgroundColor: "#772e2e",
        }
    }
});


<Pagination>

    <PaginationItem>
        <PaginationLink previous />
    </PaginationItem>

    {someNumbersList.map((i, key) => (
    <PaginationItem key={key} className={classes.paginationItemStyle} active={currentPage==(i+1)}>
        <PaginationLink className={classes.paginationLinkStyle}>
            {i+1}
        </PaginationLink>
    </PaginationItem>
    ))}

    <PaginationItem>
        <PaginationLink next />
    </PaginationItem>

</Pagination>

Answer 1

要更改事件按钮的背景，您可以使用它。

import makeStyles from '@material-ui/core/styles/makeStyles';

const useStyles = makeStyles(() => ({
  ul: {
    '& .MuiPaginationItem-root': {
       '&.Mui-selected': {
         background: 'red',
         color: 'white',
         // borderRadius: '50%',
       },
    },
  },
}));

const classes = useStyles();

export default function functionName(){
  <Pagination
  count={Math.ceil(array.length / numberOfItemsIWantPerPage)}
  page={page}
  classes={{
     root: classes.ul,
   }}
  />
}