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 }

索引.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如下所示，但没有成功。

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.

Answer 1

此错误通常表明项目中存在依赖项的多个版本，例如，一个在包的 package.json 中定义，另一个在根级别 package.json 中指定为依赖项。您可以通过运行来验证这一点：yarn why package-name，例如yarn why @mui/system。如果版本不匹配，您会看到：

\n

\xe2\x94\x9c\xe2\x94\x80 my-repo@workspace:packages/react-components [c0f3f]\n\xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80 @mui/system@npm:5.10.4 [9e221] (via npm:5.10.4 [9e221])\n\xe2\x94\x82\n\xe2\x94\x9c\xe2\x94\x80 my-repo@workspace:packages/react-components\n\xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80 @mui/system@npm:5.10.4 [9e221] (via npm:5.10.4 [9e221])\n\xe2\x94\x82\n\xe2\x94\x9c\xe2\x94\x80 @mui/material@npm:5.10.4\n\xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80 @mui/system@npm:5.11.16 (via npm:^5.10.4)\n\xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80 @mui/material@npm:5.10.4 [9e221]\n   \xe2\x94\x94\xe2\x94\x80 @mui/system@npm:5.11.16 [478da] (via npm:^5.10.4 [478da])\n

\n

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

\n

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

\n

这里：yarn workspace @my-repo/react-components add @mui/system@5.11.6。再次运行确认是否生效yarn info package-name。

\n

Answer 2

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

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

打字稿问题#36800

打字稿问题#30858

除了配置之外，我找不到适用于 pnpm 的方便解决方案nodelinker=hoisted，这首先违背了使用 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"
    }
}