Using the theme context "Material UI 5" React - reactjs

Question

I Try To Change the default Theme In Material UI By Using createTheme:
I Follow Material UI Dec. (Using Typescript):
import { makeStyles } from '#mui/styles';
import { createTheme, ThemeProvider } from '#mui/material/styles';
const theme = createTheme({
palette: {
primary: {
light: '#d2d8de',
main: '#00a1a6',
dark: '#5c6b77',
contrastText: '#313944',
},
},
typography: {
fontSize: 12
},
});
const useStyles = makeStyles((theme) => ({
root: {
color: theme.palette.primary.main,
}
}));
const App = (props) => {
const classes = useStyles();
return <ThemeProvider theme={theme}><div {...props} className={classes.root}></ThemeProvider>;
}
Typography It's Work As Default But If I use theme is an empty object;
It's Show Error:
TypeError: Cannot read properties of undefined (reading 'primary')

Answer 1

Note: your theme provider will pass theme to your wrapped child components only. So if you are calling theme outside theme provider it will not be accessible.
So you need to wrap styling inside child component
Also pass options for your new theme, its empty.
You need to pass somehting like this, example :
const theme = createTheme({
palette: {
primary: {
main: purple[500],
},
secondary: {
main: green[500],
},
},
});
return (
<ThemeProvider theme={theme}>
<ChildComponent />
</ThemeProvider>
);
ChildComponent
const useStyles = makeStyles(theme => ({
...theme
}));
const ChildComponent = () => {
const classes = useStyles();
return //some dom elements using classes
}
Please check - https://mui.com/customization/theming/#createtheme-options-args-theme