我按照教程为我的表格添加页面分页，现在我的浏览器中出现了这个错误：

Uncaught TypeError: Cannot read property 'main' of undefined
    at ButtonRoot.ownerState.ownerState (Button.js:80)
    at transformedStyleArg (createStyled.js:189)
    at handleInterpolation (emotion-serialize.browser.esm.js:137)
    at serializeStyles (emotion-serialize.browser.esm.js:262)
    at emotion-styled-base.browser.esm.js:131
    at emotion-element-cbed451f.browser.esm.js:36
    at renderWithHooks (react-dom.development.js:14985)
    at updateForwardRef (react-dom.development.js:17044)
    at beginWork (react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)

这完全阻止我显示我的页面。 我知道从 mui v4 到 mui v5 有很大的样式变化，我设法通过使用简单的 CSS“避开”它们。所以我完全不明白我的错误。特别是因为错误似乎位于“ButtonRoot”中？ :

backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),

因此，这里是我使用“主题”的代码（我通常使用与教程相同的代码）：

import { useTheme } from '@mui/material';

import LastPageOutlinedIcon from "@mui/icons-material/LastPageOutlined";
import FirstPageIcon from "@mui/icons-material/FirstPage";
import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";

function TablePaginationActions(props) {
  const theme = useTheme();
  const { count, page, rowsPerPage, onPageChange } = props;

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

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

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

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

  return (
    <div style={{ flexShrink: 0, marginLeft: 2.5 }}>
      <IconButton
        onClick={handleFirstPageButtonClick}
        disabled={page === 0}
        aria-label="Première page"
      >
        {theme.direction === "rtl" ? (
          <LastPageOutlinedIcon />
        ) : (
          <FirstPageIcon />
        )}
      </IconButton>

      <IconButton
        onClick={handleBackButtonClick}
        disabled={page === 0}
        aria-label="Page précédente"
      >
        {theme.direction === "rtl" ? (
          <KeyboardArrowRightIcon />
        ) : (
          <KeyboardArrowLeftIcon />
        )}
      </IconButton>

      <IconButton
        onClick={handleNextButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="Page suivante"
      >
        {theme.direction === "rtl" ? (
          <KeyboardArrowLeftIcon />
        ) : (
          <KeyboardArrowRightIcon />
        )}
      </IconButton>

      <IconButton
        onClick={handleLastPageButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="Dernière page"
      >
        {theme.direction === "rtl" ? (
          <FirstPageIcon />
        ) : (
          <LastPageOutlinedIcon />
        )}
      </IconButton>
    </div>
  );
}

export default function Importation() {

  // Pagination
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);

  TablePaginationActions.propTypes = {
    count: PropTypes.number.isRequired,
    onPageChange: PropTypes.func.isRequired,
    page: PropTypes.number.isRequired,
    rowsPerPage: PropTypes.number.isRequired,
  };

  // Permet de changer de page
  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  return (
    <Grid
      container
      style={{ width: "100%", minHeight: "90vh" }}
      {...getRootProps()}
    >
 
      <TablePagination
        component="div"
        rowsPerPageOptions={[]}
        count={fichiers.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        ActionsComponent={TablePaginationActions}
      />
    </Grid>
  );
}

注意：请注意整个页面（+1000 行），但我认为我的问题来自这种“主题”样式。

最后，教程的代码，我以此为基础： https://codesandbox.io/s/ccw8hm?file=/demo.js