material-ui TS模块增加功能,用于向不工作的组件添加变体

z5btuh9x  于 2022-10-29  发布在  其他
关注(0)|答案(6)|浏览(140)

这里的文件上说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';
我不知道为什么会这样,但这可能应该添加到文档中。

iezvtpos

iezvtpos1#

看起来这个错误报告没有足够的信息让我们中的一个人重现它。
请提供一个CodeSandbox(https://material-ui.com/r/issue-template-next)、一个指向GitHub上的仓库的链接,或者提供一个重现问题的最小代码示例。
以下是一些提供最小示例的提示:https://stackoverflow.com/help/mcve

0vvn1miw

0vvn1miw2#

我有同样的问题时,自定义或添加一个变种的按钮后,文件。

brqmpdu1

brqmpdu13#

@sveggiani你介意制作一个代码沙盒来显示这个问题吗?

0aydgbwb

0aydgbwb4#

@MarksCode我有空的时候会试试。
同时,我找到了一个变通方法,强制将变体设置为any

{
  props: { variant: 'secondary' as any },
  style: {
    backgroundColor: baseThemeColors.common.white,
  }
}
siotufzp

siotufzp5#

@标记代码
我认为这里的问题是,当带有模块扩充的文件没有import/export语句时,您定义的是一个环境模块(一个没有实际实现的形状),这与扩充具有实现的内容(如Button)是不同的。
尽管我刚刚在a CodeSandbox中快速测试了它,而且TypeScript似乎可以识别新的变体,即使您将import '@mui/material/Button';替换为无用的导出(如export default '';)--也许,导入模块本身是不必要的,唯一重要的是该文件是一个至少包含一个import/export语句的模块,这很奇怪。
在任何情况下,没有意识到这一点的开发人员都将从更好的文档中受益-即使它将重复显而易见的内容,我认为,它不会,因为TypeScript关于模块扩充的文档从一开始就不清楚。

pbwdgjma

pbwdgjma6#

正确的方法是关闭自动导出,例如:

// shut off automatic exporting for the `Theme` above
export {};

例如,看看我们是如何为@mui/lab执行此操作的:https://github.com/mui/material-ui/blob/master/packages/mui-lab/src/themeAugmentation/components.d.ts的最大值

相关问题