Material UI 样式组件 - “如果没有引用，X 的推断类型就无法命名......”

Question

这个 TS 问题是如何解决的？ 我的样式组件是从

style.ts

文件导出的，并在我的 React 组件的

index.tsx

文件中使用：

风格.ts：

import { styled, Theme } from '@mui/material/styles';

type CardProps = {
    theme?: Theme;
    selected: boolean;
};

const Card = styled('div', {
    shouldForwardProp: (p) => !!p
})(({ theme, selected }: CardProps) => ({
    display: 'flex',
    flexDirection: 'column',
    padding: theme?.spacing(2),
    width: theme?.spacing(39.5),
    boxShadow: theme?.shadows[2],
    color: theme?.palette.grey[50],
    borderRadius: theme?.spacing(0.5),
    margin: `${theme?.spacing()} ${theme?.spacing(2)}`,
    ...(selected && {
        background: theme?.palette.grey[100],
        color: theme?.palette.getContrastText(theme?.palette.grey[100])
    }),
    ...(!selected && {
        cursor: 'pointer',
        border: `1px solid #DEE4EA`
    }),
    '&:hover': {
        ...(!selected && { color: theme?.palette.grey[100] })
    }
}));

export { Card }

index.tsx

import { Card } from './style';

const ExperimentCard = ({
    id,
    selected,
    handleSelectCard,
}: Props) => (
 <Card data-cy="experiment-card" id={id} selected={selected} onClick={() => handleSelectCard(id)}>
    ...
</Card>

TS问题：

Plugin typescript: @rollup/plugin-typescript TS2742: The inferred type of 'Card' cannot be named without a reference to '@mui/material/node_modules/@mui/system'. This is likely not portable. A type annotation is necessary.

我发现的一个建议是将建议的参考添加到

tsconfig.json

文件中，如下所示，但没有运气。

"types": ["@mui/material/node_modules/@mui/system"],

Answer 1

此错误通常表明项目中存在多个版本的依赖项，例如一个在包的 package.json 中定义，另一个在根级别 package.json 中指定为依赖项。您可以通过运行：

yarn why package-name

来验证这一点，例如

yarn why @mui/system

。如果版本不匹配，您会看到：

├─ my-repo@workspace:packages/react-components [c0f3f]
│  └─ @mui/system@npm:5.10.4 [9e221] (via npm:5.10.4 [9e221])
│
├─ my-repo@workspace:packages/react-components
│  └─ @mui/system@npm:5.10.4 [9e221] (via npm:5.10.4 [9e221])
│
├─ @mui/material@npm:5.10.4
│  └─ @mui/system@npm:5.11.16 (via npm:^5.10.4)
│
└─ @mui/material@npm:5.10.4 [9e221]
   └─ @mui/system@npm:5.11.16 [478da] (via npm:^5.10.4 [478da])

注意前两个条目如何使用 @mui/system 5.10.4，而后两个条目使用 5.11.16。

要修复此问题，请更新您在 package.json 的“依赖项”中定义的不匹配版本，以匹配另一个库所需的版本。

这里：

yarn workspace @my-repo/react-components add @mui/[email protected]

。再次运行

yarn info package-name

确认是否生效。

Answer 2

我在 monorepo 设置中使用 pnpm 风格的 mui 时遇到了这个问题。经过一番挖掘后，这似乎是由于打字稿与嵌套传递依赖关系不能很好地配合而引起的。

以下是 github 上的一些相关问题，人们在其中讨论问题的根源并提出一些解决方案：

打字稿问题#36800

打字稿问题#30858

除了配置

nodelinker=hoisted

之外，我找不到适用于pnpm的便捷解决方案，这违背了使用pnpm的初衷。

编辑

似乎将

@mui/system

安装为直接依赖项是有效的，因为

@mui/system

现在位于

node_modules

的根级别。我还必须重新加载我的项目窗口才能让 typescript 与 vscode 很好地配合。但是，如果您作为直接依赖项安装的版本与您的

@mui/material

版本不兼容，这可能会导致问题，所以如果您采用这种方法，请务必小心。

在您的情况下，最好将

@mui/system

直接映射到根级别

tsconfig.json

文件中的嵌套依赖项：

"compilerOptions": {
    "baseUrl": ".",
    "paths:": {
        "@mui/system": "@mui/material/node_modules/@mui/system"
    }
}

Answer 3

我在使用 pnpm 的 nextjs 和 monorepo 项目中遇到了同样的问题。我已经找到解决办法了

如果您使用MUI，那么您需要将其添加到项目的根文件中。

import type {} from "@mui/system";

如果您使用 Nextjs，那么根文件将是 layout.tsx 文件。如果您使用 React with vite，那么我认为根文件将是 main.ts 文件。

注意：我仅使用 Turbo 在我的 Nextjs 14 项目和 monorepo 上测试了这一点。

如果您想了解更多详细信息，这是 GitHub 存储库 和 GitHub 讨论。

仅供参考：此解决方案应该对所有软件包都有效。这不仅限于 Material UI (MUI)。