MUI结合TypeScript使用时palette属性不存在于Theme类型报错问题

TypeScript做的是编译阶段静态类型校验，和运行时对象实际有没有属性没有直接关系——运行时theme确实带palette，但TS拿到的theme类型定义里没有声明这个属性，就会抛2339错误，这个场景下基本都是以下三类问题：

• styled方法导入路径错误：误从@emotion/styled、styled-components等第三方样式库直接导入了未经过MUI类型封装的styled方法，这类方法默认推导的theme类型是空泛型，自然不存在palette属性
• 类型声明缺失：没有给emotion/styled-components做MUI主题的类型合并，TS无法识别注入的MUI主题结构
• 依赖版本冲突：项目中存在多版本@mui/material依赖，TS引用了错误版本的Theme类型定义

优先修正导入路径（最常用解法） #

MUI本身封装了带正确类型推导的styled方法，直接从MUI的样式入口导入即可，不需要额外给theme手动标注类型：

// 错误导入（会触发类型报错）
// import styled from '@emotion/styled'
// import styled from 'styled-components'

// 正确导入
import { styled } from '@mui/material/styles'
import TextField from '@mui/material/TextField'

const StyledTextField = styled(TextField)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main, // 这里不会再报类型错误
}))

手动标注theme类型（适配自定义styled场景） #

如果项目必须使用原生emotion/styled-components的styled方法，可以手动给入参的theme标注MUI的官方Theme类型：

import styled from '@emotion/styled'
import TextField from '@mui/material/TextField'
import type { Theme } from '@mui/material/styles'

const StyledTextField = styled(TextField)(({ theme }: { theme: Theme }) => ({
  backgroundColor: theme.palette.primary.main,
}))

补充全局类型声明（修复全局类型识别问题） #

如果修正导入后依然报错，在项目src目录下新建mui.d.ts文件，写入以下类型补充代码，让TS在全局识别MUI注入的主题类型：

import type { Theme as MuiTheme } from '@mui/material/styles'

// 适配emotion
declare module '@emotion/react' {
  export interface Theme extends MuiTheme {}
}

// 如果使用styled-components作为样式引擎，打开下面的注释
// import type {} from '@mui/styled-engine-sc'

写入完成后重启TS服务（VSCode中可通过命令面板执行TypeScript: Restart TS Server）清除类型缓存即可。

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