mui Theme color not applying

Question

I have created a basic component called and applying styles using makeStyles()

// Welcome.js

import { makeStyles } from "@mui/styles";

const useStyles = makeStyles((theme) => {
  return {
    root: {
      width: "100%",
      maxWidth: 360,
      background: theme.palette.background.default,
    },
  };
});
export default function Welcome() {
  const classes = useStyles();
  return <div className={classes.root}>Hello world</div>;
}

// App.js

import Welcome from "./components/Welcome";

function App() {
  return <Welcome />;
}

export default App;

i am getting an error like
TypeError: Cannot read properties of undefined (reading 'background') (anonymous function)
C:/projects/mui-demo/src/components/Welcome.js:9

what's wrong?

i am using mui v5.

background is not a prop in theme.palette object. Check palette colors - https://mui.com/customization/palette/#palette-colors — Madhuri, Nov 11 '21 at 11:12
@madhuri using background: theme.palette.primary.light, and getting error TypeError: Cannot read properties of undefined (reading 'primary') also, I see 'background' property under 'palette' property in default theme object https://mui.com/customization/default-theme/#explore — ram, Nov 11 '21 at 11:23

score 0 · Accepted Answer · answered Nov 11 '21 at 12:47

I am able to fix this by creating a theme in app.js file.

// app.js

import Welcome from "./components/Welcome";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Welcome/>
    </ThemeProvider>
  );
}

export default App;

// welcome.js

import { makeStyles } from "@mui/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    background: theme.palette.background.default
  },
}));
export default function Welcome() {
  const classes = useStyles();
  return <div className={classes.root}>Hello world</div>;
}

mui Theme color not applying

1 Answers1