Question 72744 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React Typescript MaterialUI Paper 'background of undefined' – Reactjs

Everytime I add

<Paper elevation={0} />

to my react component I recieve

Cannot read properties of undefined (reading 'background')
TypeError: Cannot read properties of undefined (reading 'background')

I do not know how to fix this error and I would really like to use this

here is the full source code

import Paper from '@mui/material/Paper';

const Page: FC = () => {
  return (
    <React.Fragment>
      <Paper elevation={0} />
    </React.Fragment>
  );
};
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    fixed with wrapping it in a themeprovider

    import Paper from '@mui/material/Paper';

const theme = createTheme({
  palette: {}
});

const Page: FC = () => {
  return (
    <React.Fragment>
          <ThemeProvider theme={theme}>
             <Paper elevation={0} sx={{ background: 'white' }} />
          </ThemeProvider>
    </React.Fragment>
  );
};

export default Page;

  2. 0

    This error might be occurring because the Paper component of Material UI. As you are trying to access a background property that is not defined. To fix this error, you can try pasing a sx prop to the Paper component to define the background property.

    Here’s an example of how the eeror can be fixed by setting the sx prop:

    import Paper from '@mui/material/Paper';

const Page: FC = () => {
  return (
    <React.Fragment>
      <Paper elevation={0} sx={{ background: 'white' }} />
    </React.Fragment>
  );
};

export default Page;

    Like in the above example, ive added the sx prop to set the background property to white. You can replace white with any other valid CSS color value to set a different background color.

    **

    Note

    **
    the sx prop is a shorthand for defining inline styles using the styled-system library. You may also define the styles using plain CSS in a separate CSS file and apply the class name to the Paper component using the className prop.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search