javascript - Cannot read property 'main' of undefined in MUI v5 - Stack Overflow

admin管理员组

文章数量:1410717

I was following the tutorial to add page pagination for my Table and now I have this error in my browser :

   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)

Which pletely prevents me from displaying my page. I know there are big style changes from mui v4 to mui v5, I managed to "dodge" them by using simple CSS. So I don't understand my mistake at all. Especially since the error seems to be located in a "ButtonRoot" ? :

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

So here is my code where I use a "theme" (I normally have the same code as the tutorial) :

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
        ponent="div"
        rowsPerPageOptions={[]}
        count={fichiers.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        ActionsComponent={TablePaginationActions}
      />
    </Grid>
  );
}

I was following the tutorial to add page pagination for my Table and now I have this error in my browser :

   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)

Which pletely prevents me from displaying my page. I know there are big style changes from mui v4 to mui v5, I managed to "dodge" them by using simple CSS. So I don't understand my mistake at all. Especially since the error seems to be located in a "ButtonRoot" ? :

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

So here is my code where I use a "theme" (I normally have the same code as the tutorial) :

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
        ponent="div"
        rowsPerPageOptions={[]}
        count={fichiers.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        ActionsComponent={TablePaginationActions}
      />
    </Grid>
  );
}

Note : It's note the full page (+1000 lines) but I think my problem es from this "theme" style.

Finally, the code of the tutorial, on which I base myself : https://codesandbox.io/s/ccw8hm?file=/demo.js

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow asked Apr 28, 2022 at 15:26 QuentinQuentin 37188 silver badges2323 bronze badges 1

• Maybe you'll need to check its lifeCycle (w3schools./react/react_lifecycle.asp), because it's just being defined yet when you call backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity), or it's defined but in other way and you're calling it incorrectly. Or even you're not importing mui correctly. 3 possibilities I can see, hope it'd be useful to you – José Lourenço Commented Apr 28, 2022 at 15:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Hopefully this solves your issue as it did mine, but I believe it has to do with passing custom colors to the Button or IconButton ponent as described here. The error returned is the same that you are describing.

https://github./mui/material-ui/issues/33054

Essentially the problem is that some ponents dropped support for the 'default' color that was available in v4. In v5 they state they want to align with the material spec and no longer include the 'default' grey color because it isn't part of the material design guidelines. This has caused a major headache for me, since I used these default/grey buttons and other ponents extensively when making proper dark/light themes.

You would need to go through your code and ensure that there are no <Button color="default"/> instances and if there is, change the color to something thats supported per the docs, like primary or secondary for example. There are some ponents that still support 'default' like AppBar, Fab and IconButton, but not Button.

As a quick fix, you can update/create your custom MUI theme and add a default color, but it may end up looking weird, because it doesn't cover all the variants that v4 had (Here's a thread about replicating the color fully).

import { createTheme } from '@mui/material/styles';
import { grey } from "@mui/material/colors";

export const lightTheme = createTheme({
  palette: {
    mode: 'light',
    default: {
      main: grey[300],
      dark: grey[400]
    },
  }
});

check this link You cannot customize themes in Material UI by just declaring them in your code, you have to make the style ponents for the every ponent you used by importing styled from MUI, in your code use sx={{}} instead of style={{}} for better reliability.

本文标签： javascriptCannot read property 39main39 of undefined in MUI v5Stack Overflow