material-ui: useTheme() hook is not returning palette colors
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
`const theme = useTheme();
console.log(theme.palette); // => {mode: ‘light’}`
Expected behavior 🤔
`const theme = useTheme();
console.log(theme.palette); // => {mode: ‘light’, primary: { … }, secondary: { … }, … }`
Steps to reproduce 🕹
No response
Context 🔦
No response
Your environment 🌎
@emotion/react: ^11.9.0 => 11.9.0
@emotion/styled: ^11.8.1 => 11.8.1
@mui/base: 5.0.0-alpha.81
@mui/icons-material: 5.6.2
@mui/lab: 5.0.0-alpha.74 => 5.0.0-alpha.74
@mui/material: ^5.8.0 => 5.8.0
@mui/private-theming: 5.6.2
@mui/styled-engine: 5.6.1
@mui/styles: 5.6.2
@mui/system: 5.6.4
@mui/types: 7.1.3
@mui/utils: 5.6.1
@types/react: 18.0.9
react: ^18.1.0 => 18.1.0
react-dom: ^18.1.0 => 18.1.0
About this issue
- Original URL
- State: open
- Created 2 years ago
- Reactions: 2
- Comments: 18 (4 by maintainers)
@totszwai We have the same problem. useTheme always returns the default theme and not our custom theme when used in in our main app. Like you, we have also broken our theme provider out into a package and import it into our main app. The context looks to be loading the proper custom theme in the main app, but useTheme always returns the default theme. We first noticed this because whenever we used the Box component theme (in the sx prop or on the color props), it would also always use the default theme instead of the custom theme, and it looks like that component uses useTheme under the hood. This ONLY affected the Box component theme. Other MUI components we used had no problem consuming the custom theme from the context.
I found what was the problem … I had to replace:
import { useTheme } from ‘@mui/system’;
with:
import { useTheme } from ‘@mui/material’;
This was fine before version 5.7.0 …