使用MUI的sx prop时触发TypeScript错误是什么原因？

MUI 内置的 SxProps<Theme> 类型本身已经包含了「直接传入样式对象」和「传入接收theme参数、返回样式对象的函数」两种合法类型定义。你当前的代码错误地给函数的返回值标注了SxProps<Theme> | undefined类型，相当于混淆了函数本身的类型和函数返回值的类型，导致 TypeScript 识别到你传入的函数不符合 sx 属性的类型要求，抛出不匹配错误。

有两种可行的修正写法：

• 写法1：删除多余的返回值类型标注，让 TypeScript 自动推导类型即可

  sx={(theme: Theme) => ({
    ...theme.typography.body,
    color: theme.palette.primary.main,
  })}
  

• 写法2：如果需要显式声明类型，直接给整个sx属性标注SxProps<Theme>类型即可，无需单独给函数标注返回值

  import type { SxProps, Theme } from '@mui/material/styles'
  
  // 组件内使用
  sx={(theme) => ({
    ...theme.typography.body,
    color: theme.palette.primary.main,
  })} as SxProps<Theme>
  

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