MUI扩展palette.text.link时报TypeText不存在link属性错误
问题原因
扩展类型失败的核心原因是类型挂载的位置完全写错了:
- 你通过
theme.palette.text.link访问的字段,类型并不定义在Theme/ThemeOptions接口的根级text字段下,而是归属于Palette模块下的TypeText接口。之前参照status.danger写的根级text属性,和palette下的text属性完全是两个不相关的类型,TS不会做合并。 - 你之前尝试补充
TypeText接口时多嵌套了一层text结构,相当于要求类型路径为theme.palette.text.text.link,和你实际要访问的路径不匹配,自然无效。
正确写法
直接对TypeText接口做类型增强即可,不需要额外修改其他接口。MUI内部PaletteOptions的text字段已经定义为Partial<TypeText>,只要给TypeText补充link属性,创建主题传参和读取时的TS校验都会自动生效:
declare module '@mui/material/styles' { interface TypeText { link: string; } }
写好类型声明后,在createTheme的palette.text字段下配置实际的链接色值即可正常调用:
const theme = createTheme({ palette: { text: { link: '#1677ff', // 替换为你实际需要的主题链接色 }, } }); // 此时写`theme.palette.text.link`不会再报TS错误,运行时也能正常取到值
补充说明
为什么新增status.danger时直接给Theme/ThemeOptions加属性能生效:因为status本身是MUI主题类型里没有预留的顶级自定义字段,直接在根接口补充属性会和原有类型自动合并;但palette.text是MUI内置的固定结构字段,有独立的类型定义TypeText,必须扩展对应接口才能生效。
内容的提问来源于stack exchange,提问作者Noob
相关产品推荐
相关产品推荐

