单仓库中多个包的物料UI模块扩充



我正在使用lerna创建多个UI包。

我正在包a中扩充@materialui/styles,以添加更多的调色板和排版定义。我可以在a包里买到新型号的

包b是一个使用材料ui组件和makeStyles函数的组件,然而,我无法访问包a中声明的新类型。

当然,我在包b中安装了包a,并在没有任何帮助的情况下尝试在创建样式的文件中导入模块。此外,我尝试指定";路径";包b tsconfig中的材料ui,但同样没有帮助。

但是如果我试图在包b中导入包a。

有人尝试过这样的成功吗?

我们正在进行私人回购,所以我不能分享,但如果需要,我会提供另一份回购来证明这一问题。

我通过从文件中导出材质ui的主题来解决这个问题,我在包a中增强了主题,并将其导出到包外。在包b中,我只需要在tsconfig中指定path,它就可以知道额外的类型。

我遇到了与OP相同的问题,OP的回答让我找到了解决方案,但我发现这有点难以理解。

以下是我解决问题的方法。

包a:中TS文件中的任何位置

declare module "@mui/material/styles" {
interface Palette {
brand: PaletteColor;
}
interface PaletteOptions {
brand?: PaletteColorOptions;
}
}

在包b的tsconfig.json中:

{
"compilerOptions": {
...  
"paths": {
"@mui/material/*": [
"./node_modules/package-a/*",
"./node_modules/@mui/material/*"
]
}
}
}

请注意,您可能需要重新启动TypeScript服务器或IDE。

对我来说,在消费项目中导入带有模块增强的文件解决了这个问题。

将此行添加到您的消费项目

import "@my-package/theme/base";

在src/theme/base.ts 中

declare module "@mui/material/styles" {
interface Theme {...}
}

最新更新