用我的库包装 MUI 返回错误

Posted 2023-02-22

【中文标题】用我的库包装 MUI 返回错误

【英文标题】：Wrapping MUI with my library returns error

【发布时间】：2022-01-21 23:56:16

【问题描述】：

我想构建一个包装 MUI 的库。 我用这段代码创建了一个按钮：

import React,  ReactNode  from 'react'
import Button from '@mui/material/Button';

import './Button.css'

export interface ButtonProps 
    color: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined;
    children: ReactNode;
    size: "small" | "medium" | "large" | undefined;
    variant: "text" | "contained" | "outlined" | undefined;


const IButton = (props: ButtonProps) => 
    console.log(props)
    return <Button ...props>props.children</Button>


export default IButton

此代码在 storybook 中运行，但是当我将它导入我的 App 项目时，我收到此错误：

我认为我有多个 react 副本，这会导致错误。 我尝试使用以下方法修复它：

peerDependencies: 
        react: "17.0.2"

但这并没有帮助。

这是我的应用程序“npm ls react”

感谢您的帮助！

【参考方案1】：

你有多个 reactjs， 尝试删除 node_modules 中的 reactjs，然后运行：npm install, 然后重新启动服务器，这将使用您库中的组件。

【讨论】：

得到同样的错误：\

您是否将您的库链接到您的应用项目？在您的库文件夹中，然后打开一个终端： >sudo npm link >npm run compile 在您的 App 项目文件夹中，在终端中：>npm link libraryName 或者您可能只删除了 reactjs 模块，但您必须删除 Material-ui 模块也是。

谢谢，购买 我没有正确使用 peerDependencies...我没有从 devDependencies 中删除它...如果我发布并 npm install 包，它可以正常工作。现在我试图弄清楚如何使它与 npm link 一起工作:)