如何使用素材ui自定义分页？

Question

<Pagination count={35} variant="outlined"  shape="rounded" color="primary"/>

这设置了默认的背景颜色和文本颜色，但我需要定制背景颜色和文本颜色。我不能改变它。我正试图改变颜色，但我失败了。

Answer 1

    import * as React from 'react';
    import Pagination from '@mui/material/Pagination';
    import Stack from '@mui/material/Stack';
    import { styled } from '@mui/system';
    
    //Make a styled pagination component using styled API that overrides default style
    const MyPagination = styled(Pagination)({
      '& .Mui-selected': {
        backgroundColor: 'red',
        color:'#19D5C6',
       },
      "& .MuiPaginationItem-root": {
        border: "1px solid red"
       }
       //There has a lot of Global classes. you have to use it according to your requirement
       //Some classes are MuiPaginationItem-root, MuiPaginationItem-page and Mui-selected

    });

    export default function BasicPagination() {
      return (
        <Stack spacing={2}>
          <MyPagination count={10} />
        </Stack>
      );
    }

获取所有类名的点击

Answer 2

我会使用一个主题，它将适用于整个项目的一致性。

这里的代码箱实现：https://codesandbox.io/s/mutable-river-e15yxw

Theme.js

import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";

export default function Theme(props) {
  const theme = createTheme({
    components: {
      MuiPagination: {
        styleOverrides: {
          root: ({ ownerState }) => ({ backgroundColor: "#ffeeaa" })
        }
      },
      MuiPaginationItem: {
        styleOverrides: {
          root: ({ ownerState }) => ({ backgroundColor: "#ffcc00", color: "maroon" })
        }
      }
    }
  });

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {props.children}
    </ThemeProvider>
  );
}

Demo.js

import * as React from "react";
import Pagination from "@mui/material/Pagination";
import Stack from "@mui/material/Stack";
import Theme from "./Theme";

export default function BasicPagination() {
  return (
    <Theme>
      <Stack spacing={2}>
        <Pagination count={10} sx={{ backgroundColor: "#eeffaa" }} />
        <Pagination count={10} color="primary" />
        <Pagination count={10} color="secondary" />
        <Pagination count={10} disabled />
      </Stack>
    </Theme>
  );
}

Answer 3

如果你喜欢的话，还有另外一个，使用sx道具：

<Pagination
      count={35}
      shape="rounded"
      color="primary"
      sx={{
        "& .MuiPagination-ul": { backgroundColor: "yellow" },
        "& .MuiPaginationItem-page": { color: "red" },
        "& .Mui-selected": { backgroundColor: "green" },
      }}
    />

其结果是：

​

​

编辑：

<Pagination
      count={35}
      shape="rounded"
      color="primary"
      sx={{
        "& .MuiPagination-ul": { backgroundColor: "yellow" },
        "& .MuiPaginationItem-page": { color: "red", border: "1px solid green" },
        "& .Mui-selected": { backgroundColor: "green" },
      }}
    />

​

​