重复问题
- 我已搜索现有的问题
最新版本
- 我已测试了最新版本
重现步骤 🕹
- 无响应*
当前行为 😯
目前,https://mui.com/material-ui/customization/typography/#adding-amp-disabling-variants 的指导要求您添加以下类型增强:
declare module '@mui/material/styles' {
interface TypographyVariants {
poster: React.CSSProperties;
}
// allow configuration using `createTheme`
interface TypographyVariantsOptions {
poster?: React.CSSProperties;
}
}
// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
interface TypographyPropsVariantOverrides {
poster: true;
h3: false;
}
}
但在某些情况下,访问 theme.typography.poster
仍然会导致类型错误:
packages/theme/src/componentsOverrides/MuiCssBaseline.ts:8:21 - error TS2339: Property 'poster' does not exist on type 'Typography'.
8 pre: typography.poster,
~~~~~~
预期行为 🤔
访问 theme.typography.poster
永远不会导致类型错误。
在我们的项目中,我只有一个解决方案:直接增强 Typography
(而不是 TypographyVariants
(Typography
的别名)):
declare module "@mui/material/styles/createTypography" {
interface Typography {
poster: TypographyStyle;
}
}
上下文 🔦
- 无响应*
您的环境 🌎
- 无响应*
7条答案
按热度按时间omhiaaxx1#
但是这还不足以解决问题,当你执行
typography.poster
时会出现类型错误:你能提供一个Codesandbox吗?你可以克隆这个模板:https://material-ui.com/r/issue-template-latest
预期的使用方式类似于
<Typography variant="poster">poster</Typography>;
。qhhrdooz2#
哦,现在我明白了它的工作原理。
TypographyVariants
实际上是Typography
的别名:material-ui/packages/mui-material/src/styles/index.d.ts
第24行
| | TypographyasTypographyVariants, |
所以增强
TypographyVariants
是为了将属性添加到Typography
中。但如果用户由于某种原因没有导入@mui/material/styles
(直接或间接地),那么这个操作就会失败,因此没有声明TypographyVariants
作为别名。对于我们来说,这种情况发生在运行 Jest 测试时。在其他地方,增强操作是正常的。已根据情况更新了问题标题。抱歉,很难在代码沙盒中重现这个问题,所以我不打算这样做。对我们来说,扩展
Typography
而不是TypographyVariants
是一个更容易的选择。shyt4zoc3#
我认为在模块增强中正确导入是非常关键的。请查看此处解决类似问题的解析。
6xfqseft4#
是的,问题在于文档中的这一部分:
https://mui.com/material-ui/customization/typography/
应该像这样:
zf2sa74q5#
我尝试在主题增强文件中添加
,但这没有帮助。
9w11ddsr6#
luaexgnf7#
是的,问题在于文档中的这一部分:
https://mui.com/material-ui/customization/typography/
应该是这样的:
感谢@incompletude,你救了我的一天!