如何解决MUI v5中makeStyles缺失ThemeProvider上下文的报错

问题根因 #

报错和styles.tsx的作用域无关，核心原因是你使用的makeStyles来自@mui/styles包，这是MUI v5的遗留兼容包，默认不会绑定MUI核心的ThemeProvider上下文，因此无法自动获取theme实例。

解决方案 #

所有方案均支持保留独立样式文件的结构，无需将样式耦合回组件内。

方案1：最小改动适配现有代码 #

无需修改styles.tsx的样式定义，只需在调用drawerStyles时手动传入从上下文获取的theme实例即可：

// drawerContainer.tsx
import { useTheme } from '@mui/material/styles';
import { drawerStyles } from 'Src/styles';

export const DrawerContainer = () => {
  const theme = useTheme();
  const classes = drawerStyles(theme);

  return (
    <Box className={classes.logo}>
      <p>some text</p>
    </Box>
  )
}

方案2：改用官方推荐的makeStyles实现 #

弃用@mui/styles，改用MUI官方推荐的tss-react提供的makeStyles，和你现有写法几乎完全一致，且天然支持ThemeProvider上下文，无需手动传参：

1. 安装依赖：

npm install @tss-react/mui @emotion/react

2. 修改styles.tsx导入和定义：

// styles.tsx
import { makeStyles } from 'tss-react/mui';
import { purple } from '@mui/material/colors';
import { Theme } from '@mui/material/styles';

export const useDrawerStyles = makeStyles()((theme: Theme) => ({
  logo: {
    'fontSize': '2em',
    'fontFamily': 'Oleo Script Swash Caps',
    'background': 'transparent',
    'border': 'none',
    'marginLeft': theme.spacing(1),
    'width': '41px',
    'overflow': 'hidden',
    'transition': 'all 0.1s ease-out',
    'cursor': 'pointer',
    '&:hover': {
      color: purple[700],
    },
  },
  slide: {
    paddingLeft: '8px',
    width: '100%',
  },
}));

3. 组件内调用：

// drawerContainer.tsx
import { useDrawerStyles } from 'Src/styles';

export const DrawerContainer = () => {
  const { classes } = useDrawerStyles();

  return (
    <Box className={classes.logo}>
      <p>some text</p>
    </Box>
  )
}

方案3：优化styled API的类型直观性 #

如果你希望使用styled API，只需给styled组件显式标注继承的属性类型，即可解决类型不直观的问题：

// styles.tsx
import { Box, type BoxProps } from '@mui/material';
import { purple } from '@mui/material/colors';
import { styled } from '@mui/material/styles';

// 显式声明Logo继承Box的所有属性，类型提示会完全和Box一致
export const Logo = styled(Box)<BoxProps>(({theme}) => ({
  'fontSize': '2em',
  'fontFamily': 'Oleo Script Swash Caps',
  'background': 'transparent',
  'border': 'none',
  'marginLeft': theme.spacing(1),
  'width': '41px',
  'overflow': 'hidden',
  'transition': 'all 0.1s ease-out',
  'cursor': 'pointer',
  '&:hover': {
    color: purple[700],
  },
}));

内容的提问来源于stack exchange，提问作者Peter Boomsma