reactjs - 如何在 Material-UI、ReactJS 中从 Pagination 设置 Pagination Item 的样式？

Question

摘要
嗨，大家好!在这个问题中，我想请教您在仅从 material-ui 中导入父组件时如何设置子组件的样式。
问题
我想覆盖从 Material-UI 导入的分页项的类。我只是从 Material-UI 导入分页组件。如何从 Pagination 组件访问子组件(Pagination Item 组件)样式？
例如。我想将此样式应用于分页项组件。

.Mui-selected {
  "background-color": "transparent";
  "color": "#19D5C6";
}

我有以下 TSX 代码。

import React from 'react';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import Pagination from '@material-ui/lab/Pagination';

// This style doesn't reach to Pagination Item
const useStyles = makeStyles((theme) =>
  createStyles({
    root: {
      'selected': {
        backgroundColor: 'transparent',
      },
    },
  }),
);

export default function BasicPagination() {
  const classes = useStyles();
  return (
    <Pagination count={10} className={classes.root} />
  );
}

我现在拥有的

我想要什么

引用文献 :

分页演示:https://material-ui.com/components/pagination/

分页 API:https://material-ui.com/api/pagination/

分页项 API:https://material-ui.com/api/pagination-item/

Answer 1

Mui-selected可以帮助你这样的:

const useStyles = makeStyles((theme) =>({
  root: {
      '& .Mui-selected': {
        backgroundColor: 'transparent',
        color:'#19D5C6',
       },
  }),
);

或(没有上面的代码):

const useStyles = makeStyles((theme) =>({
  selected: {
        backgroundColor: 'transparent',
        color:'#19D5C6',
    },
  }),
);
// .... rest of code
const classes = useStyles();
return <Pagination
            count={10} 
            className={classes.root} 
            renderItem={(item)=> <PaginationItem {...item} 
                           classes={{selected:classes.selected}} />}
            />