TypeError: Cannot read property 'main' of undefined - React problem

Question

I am doing a simple webpage with React and I defined the following palette using in a theme using createMuiTheme from material-ui.

palette: {
    primary: {
      main: "#333333"
    },
    secondary: {
      main: "#727171"
    },
    background: {
    paper: "#f8f3f0",
    default: "#f8f3f0"
    },
    accent: {
      main: "#80d6d1"
    }
}

Then, when I want to use my accent color for some text I use:

const useStyles = makeStyles(theme => ({
  content: {
    backgroundColor: theme.palette.background.default,
    minHeight: "90vh"
    color: theme.palette.background.main
  }
}));

I get the following error:

TypeError: Cannot read property 'main' of undefined

  71 |     minHeight: "90vh"
> 72 |     color: theme.palette.accent.main
  73 |   }
  74 | }));

Any ideas of what's wrong here?

There is no background attribute in the mallette object, you have only primary, secondary and accent — sidali
in fact there is, I skipped it here not to make it too long. I'll add it in order not to confuse (I didn't now it was necessary) — eseou
Try adding console.log(theme.palette) and make sure that an accent property exists. — larz
Still theme.palette.background.main doesn't exist, there is no main ! — sidali

user2384921 user2384921 · Accepted Answer · 2020-11-03T07:36:03

Please make sure that you import the from '@material-ui/core' and NOT from '@material-ui/styles' in the App.js file.

I also made the same mistake and now everything is working perfect!

Thanks!

TypeError: Cannot read property 'main' of undefined - React problem

1 Answers