如何解决Material UI中Property 'vars' does not exist on type 'Theme'错误？

问题根源 #

MUI v6默认的Theme类型并不包含vars属性——这个属性是CSS变量主题（ThemeVars）的扩展字段，你的项目要么没正确引入对应类型，要么主题配置没启用CSS变量生成。

具体解决步骤 #

1. 扩展Theme类型或导入正确的类型 #

在使用theme的文件中，手动扩展Theme类型以包含vars属性：

import type { Theme, ThemeVars } from '@mui/material/styles';

type ThemeWithVars = Theme & { vars?: ThemeVars };

// 然后在样式函数中使用这个扩展类型
const yourStyle = (theme: ThemeWithVars) => ({
  borderRadius: (theme.vars || theme).shape.borderRadius,
});

或者直接导入MUI内部的扩展主题类型（部分版本可用）：

import type { ExtendedTheme } from '@mui/material/styles';

2. 确认shared-theme的主题配置 #

检查你移入的shared-theme是否启用了CSS变量生成，正确的配置应该用extendTheme并开启相关设置：

import { extendTheme } from '@mui/material/styles';

const theme = extendTheme({
  cssVarPrefix: 'mui', // 启用CSS变量的关键配置
  // 其他主题自定义项
});

如果没有这个配置，theme.vars不会被生成，类型自然不包含该属性。

3. 检查TypeScript配置 #

确保tsconfig.json中包含MUI的类型声明，且编译配置正常：

{
  "compilerOptions": {
    "types": ["@mui/material"],
    "strict": true,
    "esModuleInterop": true
  }
}

4. 重置依赖缓存 #

若以上步骤无效，清理依赖并重新安装：

rm -rf node_modules package-lock.json
npm install
npx tsc --noEmit

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