material-ui 多个主题与TypeScript合并声明不正常工作

uujelgoq  于 4个月前  发布在  TypeScript
关注(0)|答案(5)|浏览(56)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

重现步骤 🕹

链接到实时示例:
步骤:

  1. 使用Nx并生成几个库之一
  2. 创建多个主题并使用TypeScript合并声明以获得智能感知(根据文档)
  3. 一旦您在Nx单仓库中导出多个主题,它们将发生冲突,TS将读取所有它们,这意味着例如如果主题X有一个"myVariant1"自定义排版变体,而主题Y有另一个,TS将读取它们全部,并希望您填写所有它们。
    在所有主题中填充所有内容。

当前行为 😯

一旦您导出多个主题,TypeScript会读取所有主题的合并声明。

预期行为 🤔

类型应该隔离在它们的主题中,而不是暴露给整个单仓库。不确定如何解决这个问题,但理想情况下,您可以查看其他TypeScript解决方案,而不是合并声明。Chakra UI通过将文件安装到node_modules中来实现这一点,例如。

上下文 🔦

我们有一个包含许多应用程序和许多主题的单仓库。我们希望为所有内容提供完整的TypeScript支持,但目前如果您至少使用Nx,这是不太可能的。

您的环境 🌎

npx @mui/envinfo

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 3.2.3 - ~/.nvm/versions/node/v18.13.0/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.65 
    @mui/icons-material: ^5.4.4 => 5.4.4 
    @mui/material: ^5.3.0 => 5.3.0 
    @mui/private-theming:  5.3.0 
    @mui/styled-engine:  5.3.0 
    @mui/system:  5.3.0 
    @mui/types:  7.1.0 
    @mui/utils: ^5.3.0 => 5.3.0 
    @types/react: 18.0.1 => 18.0.1 
    react: ^18.1.0 => 18.1.0 
    react-dom: ^18.1.0 => 18.1.0 
    typescript: ^4.9.5 => 4.9.5
ql3eal8s

ql3eal8s1#

我创建了一个小型的Nx monorepo,在其中复制了这个问题,你可以自己尝试一下,看看它是否不能正常工作:https://github.com/Zeilar/nx-themes
进入其中一个主题的index.ts,在那里实际的主题被导出,你应该会发现它抱怨没有缺失的排版变体。
如果你进入同一个仓库中的下一个应用程序ency-junior,进入index.tsx,你应该会发现所有主题的自定义排版变体都在那里,或者一个都没有。

mgdq6dx1

mgdq6dx12#

我和其他人发现的一个奇怪的现象是,当你使用正确的prop(例如nx build ency-junior)构建应用程序时,编辑器仍然会报错。我已经尝试了VS Code和WebStorm,不同的TypeScript版本,甚至询问了一位同事,他们也遇到了同样的问题。但是,我咨询的另一个人却能完美运行。他是目前为止的例外。
这让我非常困惑,不知道问题出在哪里。代码库中的实际编译器按预期工作,但任何我尝试的编辑器都无法与之一致,除了我刚才提到的那个同事。

svmlkihl

svmlkihl3#

你找到根本原因了吗?

pgx2nnw8

pgx2nnw84#

你找到根本原因了吗?
很遗憾,没有。我尝试了很多解决方案,但在使用Nx作为monorepo时,类型总是会合并。我不知道你是否尝试了我链接的小复现仓库; https://github.com/Zeilar/nx-themes
如果你能克隆它并看看是否在主题索引文件中也看到了一些类型错误,那就太棒了,因为这看起来像是编辑器的问题,但我问过的大多数人都有和我一样的问题。
至于根本原因,显然是我们在各种主题文件中分散地使用了TS合并声明(如文档中的示例所示)。

vs3odd8k

vs3odd8k5#

我遇到了一些类似的用例:我们正在维护一个包含CMS、UI组件库和一些视频播放器的monorepo。由于我们在CMS以及视频播放器的UI中使用了Material UI,因此我们在同一个仓库中有多个主题。
当尝试在CMS内部(作为预览播放器)使用视频播放器时,会出现上述问题,因为导入了Material UI的主题并且它们的类型声明被合并覆盖了彼此。

相关问题