Как я могу придать стиль ul внутри нумерации страниц?

Question

Я хочу придать стиль ul внутри Pagination, но что бы я ни делал, ничего не получается!
Вот картинка:

Как вы можете видеть, я хочу придать стиль MuiPagination-ul классу
Вот что я попробовал до сих пор:

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

<Pagination className={classes.Pagination}/>

Я также попробовал, чтобы он не находился внутри root, и также используя строку типа

'MuiPagination-ul': {display: 'inline-flex'}  

Что я делаю не так?

Answer 1

Я считаю использование withStyles самым простым способом настройки компонента Material-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/useStyles, вы можете использовать только className prop, если вы настраиваете класс root CSS, но в вашем случае вам нужно настроить ul CSS class (который применяется к элементу , отличному от root CSS class . Для этого требуется использовать classes prop и указать ul свойство внутри него.

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

Если ваш makeStyles вызов содержит дополнительные классы, которые не предназначены для Pagination, то вы можете Проясните, что вы положили в 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 }}
    />
  );
}