React+TypeScript项目中MUI无法读取palette的primary属性如何解决？

问题原因 #

1. 运行时上下文获取失败：你在App组件内部先执行const classes = useStyles()，此时<ThemeProvider>还未完成挂载，上下文里没有注入主题实例，导致makeStyles接收的theme参数实际为undefined，读取theme.palette.primary自然抛出运行时错误。而sx属性是在组件内部（已经处于<ThemeProvider>包裹范围）渲染时读取主题，所以可以正常访问。
2. 类型检查的局限性：你给makeStyles的回调参数标注了Theme类型，TypeScript静态编译时默认认为theme一定是符合类型定义的非空值，不会检测到运行时的空值问题，所以没有编译报错。
3. 遗留包的特性：@mui/styles是MUI v5的遗留兼容包，本身默认不会直接关联@mui/material的ThemeProvider上下文，需要额外配置才能正常注入主题。

解决办法 #

方案1（推荐）：弃用@mui/styles，改用MUI v5原生推荐的样式方案 #

MUI v5已经不推荐使用makeStyles，改用styled API或者sx属性，天然支持主题读取，和TypeScript适配性更好，也不需要额外处理上下文问题：

import { styled } from '@mui/material/styles';
import { Button } from '@mui/material';

// 定义自定义样式的按钮
const StyledButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.primary.dark,
}));

function App() {
  const {t} = useTranslation()
  return (
    <ThemeProvider theme={theme}>
      <StyledButton sx={{color:'text.secondary'}}>style</StyledButton>
    </ThemeProvider>
  );
}

方案2：直接给useStyles传入已定义的主题实例 #

你已经在组件顶部引入了初始化完成的theme变量，直接在调用useStyles时传入即可，不需要依赖上下文读取：

function App() {
  const {t} = useTranslation()
  const classes = useStyles(theme); // 直接传入主题实例
  return (
    <ThemeProvider theme={theme}>
      <Button  className={classes.root} sx={{color:'text.secondary'}}>style</Button>
    </ThemeProvider>
  );
}

方案3：调整组件层级，把useStyles的调用放到<ThemeProvider>的子组件内 #

将使用样式的部分抽为单独子组件，子组件渲染时已经处于<ThemeProvider>的包裹范围内，可以正常读取上下文中的主题：

// 抽离单独的子组件
const Content = () => {
  const classes = useStyles();
  return <Button className={classes.root} sx={{color:'text.secondary'}}>style</Button>
}

function App() {
  const {t} = useTranslation()
  return (
    <ThemeProvider theme={theme}>
      <Content />
    </ThemeProvider>
  );
}

内容的提问来源于stack exchange，提问作者mohamed nageh