MUI can't read palette value - reactjs

Question

I am trying to use typescript with MUI in reactJS ,but it keep giving me this error , I have tried to uninstall MUI packages and then install it again but nothing changes, it don't give me any error in typescript so it hard to tell why this error happen
TypeError: Cannot read properties of undefined (reading 'primary')
I have this setup for MUI
My theme configuration
export type Mode = "dark" | "light";
declare module '#mui/material/styles' {
interface Palette {
general:{
purple: string,
grayLight: string,
linear: string,
white: string
}
}
interface PaletteOptions {
general?:{
purple: string,
grayLight: string,
linear: string,
white: string
}
}
}
export const themeConfig = (mode: Mode) => {
return {
palette: {
mode: mode,
primary: {
main: primMain,
dark: primDark,
light: primLight,
},
secondary: {
main: secMain,
dark: secDark,
light: secLight,
},
error: {
main: errorMain,
dark: errorDark,
},
success: {
main: successMain,
dark: sucessDark,
},
text: {
primary: textPrimary,
secondary: textSecondary,
},
general: {
purple: commonPurple,
grayLight: commonGrayLight,
linear: comminLinear,
white: commonWhite
},
},
};
};
Create theme init
import { createTheme} from '#mui/material/styles';
import {themeConfig} from '../styles/styleTheme'
const theme = createTheme(themeConfig('dark'))
Use makeStyles method
import {makeStyles,createStyles } from '#mui/styles';
import { Theme } from '#mui/material/styles';
const useStyles = makeStyles((theme:Theme) => ({
root: {
backgroundColor: theme.palette.primary.dark,
},
}),
);
Used in component
so when I use this ('text.secondary') it work fine but when I use this (classes.root) it throw me the error I mentioned above
import { Button } from '#mui/material';
import { ThemeProvider} from '#mui/material/styles';
const classes = useStyles();
<ThemeProvider theme={theme}>
<Button className={classes.root} sx={{color:'text.secondary'}}>style</Button>
</ThemeProvider>
My react component
import React from 'react'
import {useTranslation} from 'react-i18next'
import { ThemeProvider} from '#mui/material/styles';
import {makeStyles,createStyles } from '#mui/styles';
import theme from './config/createTheme';
import {handleLangChange} from './services/changeLang'
import { Button } from '#mui/material';
import { Theme } from '#mui/material/styles';
const useStyles = makeStyles((theme:Theme) => ({
root: {
backgroundColor: theme.palette.primary.dark,
},
}),
);
function App() {
const {t} = useTranslation()
const classes = useStyles();
return (
<ThemeProvider theme={theme}>
<Button className={classes.root} sx={{color:'text.secondary'}}>style</Button>
</ThemeProvider>
);
}
export default App;

Answer 1

You are calling useStyles to create a stylesheet and reference the theme object in the root component where you also return the ThemeProvider to pass the theme down, so the theme is not available there. To fix it, move your useStyles call to a child component where it can access the theme from the parent:
<ThemeProvider theme={theme}>
<Content />
</ThemeProvider>
const Content = () => {
const classes = useStyles();
return (
<Button className={classes.root} sx={{ color: 'text.secondary' }}>
style
</Button>
);
};
Also note that it's not recommended to use useStyles/withStyles in v5 because they're deprecated APIs.
EDIT: You can see system section for more detail. This is how it'd look in v5:
import MuiButton from '#mui/material/Button';
const Button = styled(MuiButton)(({ theme }) => ({
color: theme.palette.secondary.main,
}));
sx prop:
<Button sx={{ color: 'secondary.main' }}