Как я могу изменить размер шрифта части нумерации страниц в таблице материалов с помощью response js?

Question

Я хочу увеличить размер шрифта для части нумерации нижнего колонтитула таблицы материалов.

на изображении ниже, я могу изменить размер шрифта для строк на странице с кодом ниже

[1]: https://i.stack.imgur.com/cjNmp.png

components={{
    Pagination: props => (
      <TablePagination
        {...props}

        SelectProps={{
          style:{
            fontSize: 20
          }
        }}
      />
    )
  }}

, но все еще не может изменить размер увеличения всей подчеркнутой части

Answer 1

Я стилизовал обе области заголовка двумя разными способами: один с помощью стилей панели инструментов, а другой напрямую:

В компоненте results per page есть две части, которые по умолчанию p

import makeStyles from "@material-ui/core/styles/makeStyles";
const useStyles = makeStyles({
  caption: {
    color: "green",
    padding: 8,
    border: "1px dashed grey",
    fontSize: "0.875rem"
  },
  toolbar: {
    "& > p:nth-of-type(2)": {
      fontSize: "1.25rem",
      color: "red",
      fontWeight: 600
    }
  }
});

// then later

const classes = useStyles();
<TablePagination 
      // ...
      classes={{
        toolbar: classes.toolbar,
        caption: classes.caption
      }}
    />

Вот демоверсия codesandbox