'Test fails with "TypeError: theme.spacing is not a function" after migration from MUI v4 to v5
Have design system created/customized with MUI v4. Decided to update to V5 using this manual. All steps are done (with codemods and manual fixes), except moving from JSS, to Emotion - decided to keep JSS and (with @mui/styles lib). Fixed all TS compiler errors, but after running tests getting theres errors:
TypeError: theme.spacing is not a function
18 | : theme.palette.grey[100],
19 | border: 'none',
> 20 | padding: `${theme.spacing(1)} ${theme.spacing(4)}`,
| ^
21 | borderRadius: (props: StylesProps) => (props.round ? '2rem' : 8),
22 | transition: '0.2s',
23 | '&:hover': {
console.error
MUI: The styles
argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
23 | forwardedRef,
24 | ) => {
>25 | const classes = useStyles({
| ^
26 | round: round,
27 | transparent: transparent,
28 | hasValue: props.value !== '',
Basicly, these two error appears in all components where uses JSS and makeStyles with @mui/styles
Project code example (not all code, one of the components which creashes): CodeSandbox <-- Inside src you see one component and global dir with theme customization.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|