Css 如何在分页中为ul提供样式

我想为

分页

中的

ul

赋予风格，但无论我做什么，都不起作用
这是一张图片：

如您所见，我想将样式赋予

MuiPagination ul

class
以下是我迄今为止所做的尝试：

const useStyles = makeStyles((theme) => ({
    Pagination: {
        root: {
            MuiPagination: {
                ul: {
                    display: 'inline-flex'
                }
            }   
        }            
    }
}));  

<Pagination className={classes.Pagination}/>

---

我做错了什么

我发现使用

和样式
是定制材质UI组件的最简单方法。您可以查看如何定义，以查看要使用的语法

下面是一个工作示例：

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Pagination from "@material-ui/lab/Pagination";

const StyledPagination = withStyles({
  ul: {
    display: "inline-flex"
  }
})(Pagination);

export default function BasicPagination() {
  return <StyledPagination count={10} color="primary" />;
}


如果您的
makeStyles
调用包含不用于
Pagination
的其他类，那么您可以更明确地说明在
类中放置的内容

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

const useStyles = makeStyles({
  paginationUL: {
    display: "inline-flex"
  }
});

export default function BasicPagination() {
  const classes = useStyles();
  return (
    <Pagination
      count={10}
      color="primary"
      classes={{ ul: classes.paginationUL }}
    />
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/lab/Pagination”导入分页；
const useStyles=makeStyles({
页码：{
显示：“内联flex”
}
});
导出默认函数BasicPagination（）{
const classes=useStyles（）；
返回(
);
}


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

const useStyles = makeStyles({
  ul: {
    display: "inline-flex"
  }
});

export default function BasicPagination() {
  const classes = useStyles();
  return <Pagination count={10} color="primary" classes={classes}/>;
}

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

const useStyles = makeStyles({
  paginationUL: {
    display: "inline-flex"
  }
});

export default function BasicPagination() {
  const classes = useStyles();
  return (
    <Pagination
      count={10}
      color="primary"
      classes={{ ul: classes.paginationUL }}
    />
  );
}