css - 想在材料反应表中增加上一页和下一页分页图标大小

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'
  } } } 

标签： cssreactjsmaterial-uimaterial-table

Answer 1

您的问题已在此处得到解答。

Material-UI TablePagination组件允许您传递一个 ActionsComponent 道具（如果您自己不传递，它们会提供自己的默认 TablePaginationActions 组件）。

在您的自定义 ActionsComponent 中，您可以使用iconStyleprop 定义 IconButton 组件样式。

这是来自Material-UI 文档的自定义 ActionsComponent 的示例：

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