这里的文件上说https://next.material-ui.com/customization/theme-components/,在使用typescript时向组件添加变量需要添加以下内容:
declare module '@mui/material/Button' {
export interface ButtonPropsVariantOverrides {
actionHover: true;
}
}
但是,这并不起作用,您仍然会在createTheme()
中得到一个错误:
Type '"actionHover"' is not assignable to type '"contained" | "outlined" | "text"'.ts(2322)
Button.d.ts(83, 5): The expected type comes from property 'variant' which is declared here on type 'Partial<ButtonProps<"button", {}>>'
(property) variant?: "text" | "outlined" | "contained"
为了解决这个问题,您还需要在定义文件中添加以下行:import '@mui/material/Button';
个
我不知道为什么会这样,但这可能应该添加到文档中。
6条答案
按热度按时间iezvtpos1#
看起来这个错误报告没有足够的信息让我们中的一个人重现它。
请提供一个CodeSandbox(https://material-ui.com/r/issue-template-next)、一个指向GitHub上的仓库的链接,或者提供一个重现问题的最小代码示例。
以下是一些提供最小示例的提示:https://stackoverflow.com/help/mcve
0vvn1miw2#
我有同样的问题时,自定义或添加一个变种的按钮后,文件。
brqmpdu13#
@sveggiani你介意制作一个代码沙盒来显示这个问题吗?
0aydgbwb4#
@MarksCode我有空的时候会试试。
同时,我找到了一个变通方法,强制将变体设置为
any
:siotufzp5#
@标记代码
我认为这里的问题是,当带有模块扩充的文件没有
import
/export
语句时,您定义的是一个环境模块(一个没有实际实现的形状),这与扩充具有实现的内容(如Button
)是不同的。尽管我刚刚在a CodeSandbox中快速测试了它,而且TypeScript似乎可以识别新的变体,即使您将
import '@mui/material/Button';
替换为无用的导出(如export default '';
)--也许,导入模块本身是不必要的,唯一重要的是该文件是一个至少包含一个import
/export
语句的模块,这很奇怪。在任何情况下,没有意识到这一点的开发人员都将从更好的文档中受益-即使它将重复显而易见的内容,我认为,它不会,因为TypeScript关于模块扩充的文档从一开始就不清楚。
pbwdgjma6#
正确的方法是关闭自动导出,例如:
例如,看看我们是如何为
@mui/lab
执行此操作的:https://github.com/mui/material-ui/blob/master/packages/mui-lab/src/themeAugmentation/components.d.ts的最大值