如何在Material-UI，ReactJS中从分页样式设置分页项目？

问题描述

摘要
嗨，大家好！在这个问题中，我想问您仅从material-ui导入父组件时如何设置子组件的样式。

问题
我想重写从Material-UI导入的分页项的类。我只是从Material-UI导入分页组件。如何从分页组件访问子组件（分页项组件）样式？

例如。我想将此样式应用于分页项组件。

.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} />
  );
}

我现在拥有的东西

Design I have now

我想拥有的东西

Design I want to make

参考：

分页演示：https://material-ui.com/components/pagination/
分页API：https://material-ui.com/api/pagination/
分页项API：https://material-ui.com/api/pagination-item/

解决方法

Mui-selected可以为您提供类似的帮助：

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

或（没有代码）：

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

未选中按钮的样式 CSS

const useStyles = makeStyles((theme) =>({
      root: {
          '& ul > li:not(:first-child):not(:last-child) > button:not(.Mui-selected)': {
            backgroundColor: 'transparent',);

material-ui reactjs reactjs