如何在material-ui表格分页中改变样式答案

【问题标题】：How to change style in material-ui table pagination如何在material-ui表格分页中改变样式
【发布时间】：2021-05-16 04:37:30
【问题描述】：

我想更改 material-ui 显示表格分页的方式。目前material-ui显示是这样的

我想这样改

可以这样设置吗？

【问题讨论】：

这只能通过overriding the table 组件或creating your own table component 实现。
好的，谢谢，我会尝试使用 react-table

标签： css reactjs material-ui

【解决方案1】：

你可以通过覆盖分页组件来做到这一点默认情况下，分页使用 TablePagination 组件，该组件针对处理表格数据进行了优化。此演示将其替换为分页组件。


import * as React from 'react';
import { makeStyles } from '@material-ui/styles';
import { DataGrid, useGridSlotComponentProps } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import Pagination from '@material-ui/lab/Pagination';

const useStyles = makeStyles({
  root: {
    display: 'flex',
  },
});

function CustomPagination() {
  const { state, apiRef } = useGridSlotComponentProps();
  const classes = useStyles();

  return (
    <Pagination
      className={classes.root}
      color="primary"
      count={state.pagination.pageCount}
      page={state.pagination.page + 1}
      onChange={(event, value) => apiRef.current.setPage(value - 1)}
    />
  );
}

export default function CustomPaginationGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        pagination
        pageSize={5}
        rowsPerPageOptions={[5]}
        components={{
          Pagination: CustomPagination,
        }}
        {...data}
      />
    </div>
  );
}

【讨论】：