Блог

Я хочу изменить размер шрифта всех чисел (10, 25 и 50, как показано на этом скриншоте ниже) внутри строк на странице выберите элемент внутри разбиения DataGrid на страницы компонента.

Я проверил каждое число и получил .MuiMenuItem-root в качестве селектора для каждого элемента.

Затем я изменил font-size и color (просто чтобы доказать, что .MuiMenuItem-root это был правильный выбор), как показано на скриншоте ниже.

Результат оказался успешным. Когда я применил селектор в своем коде, font-size он не работал (ничего не изменилось).

Вот мой код:

CustomDataGrid.js:

 import { DataGridPro } from '@mui/x-data-grid-pro'
import { withStyles } from '@material-ui/core/styles'

const CustomDataGrid = withStyles((theme) => ({
  root: {
    // ROOT
    height: '100%',
    border: 'none',

    ...some code here

    // PAGINATION
    'amp; .MuiTablePagination-caption': {
      fontSize: 12,
    },
    'amp; .MuiTablePagination-select': {
      fontSize: 12,
    },
    'amp; .MuiMenuItem-root': {
      fontSize: 12,
    },
    'amp; .MuiIconButton-root': {
      padding: 8,
    },
  },
}))(DataGridPro)

export default CustomDataGrid
 

зависимости (в файле package.json):

 "@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/styles": "^4.11.4",
"@mui/x-data-grid": "^4.0.0",
"@mui/x-data-grid-pro": "^4.0.0",
 

Итак, как я могу изменить font-size все числа внутри элемента select внутри разбиения на страницы компонента таблицы данных с помощью withStyles ?

DataGrid имеет Pagination слот, позволяющий переопределить компонент разбиения на страницы и его реквизиты. Он использует TablePagination закулисье, которое предоставляет SelectProps возможность переопределить Select компонент. Сам Select по себе имеет MenuProps функцию, которая позволяет переопределять реквизиты раскрывающегося списка. Итак, со всем этим, это то, что вам нужно сделать, чтобы выбрать правильный компонент:

 <DataGrid
  pagination
  {...data}
  componentsProps={{
    pagination: {
      SelectProps: {
        MenuProps: {
          sx: {
            color: "red",
            "amp; .MuiMenuItem-root": {
              fontSize: 30
            }
          }
        }
      }
    }
  }}
/>