хотите увеличить размер иконки разбивки на предыдущую и следующую страницу в таблице реагирования материала

Question

Я хочу увеличить < предыдущую страницу и > Размер иконки следующей страницы в таблице материалов для кода реакции выглядит следующим образом: *

localization = 
  { { body   : {} 
    , toolbar: { searchTooltip: 'Search'} 
    , pagination: 
      { labelRowsSelect   : 'rows'
      , labelDisplayedRows: ' {from}-{to} of {count}'
      , firstTooltip      : 'First Page'
      , previousTooltip   : 'Previous Page'
      , nextTooltip       : 'Next Page'
      , previousLabel     : '<'
      , nextLabel         : '>'
      , size              : "lg"
      , lastTooltip       : 'Last Page'
  } } } 

Answer 1

На ваш вопрос дан ответ Здесь .

Material-UI TablePagination Компонент позволяет вам пропустить компонент ActionsComponent (они предоставляют собственный компонент TablePaginationActions по умолчанию, если вы не передавайте его самостоятельно).

В своем пользовательском компоненте ActionsComponent вы можете определить стили компонента IconButton с помощью iconStyle prop.

Вот пример пользовательского ActionsComponent из Material-UI docs :

function TablePaginationActions(props) {

  const handleFirstPageButtonClick = event => {
    onChangePage(event, 0);
  };

  const handleBackButtonClick = event => {
    onChangePage(event, page - 1);
  };

  const handleNextButtonClick = event => {
    onChangePage(event, page + 1);
  };

  const handleLastPageButtonClick = event => {
    onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
  };

  return (
    <div className={classes.root}>
      <IconButton
        onClick={handleFirstPageButtonClick}
        disabled={page === 0}
        aria-label="first page"
      >
        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
      </IconButton>
      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
      </IconButton>
      <IconButton
        onClick={handleNextButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="next page"
      >
        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
      </IconButton>
      <IconButton
        onClick={handleLastPageButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="last page"
      >
        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
      </IconButton>
    </div>
  );
}