有没有办法阻止我的组件包在节点模块的目录中安装样式组件

Question

我有一个使用 React 和样式组件制作的自定义 ui 库，我已在库的 package.json 中指定使用我的主要应用程序样式组件

  "peerDependencies": {
    "react": "^18.2.0",
    "nuka-carousel": "6.0.3",
    "styled-components": "6.0.8"
  },

但是当我将库包含在我的应用程序中并运行yarn install时，我注意到它安装在库的node_module中

因此，当尝试访问我的应用程序主题时，组件崩溃了

- error Error [TypeError]: Cannot read properties of undefined (reading 'h1')
    at /Users/user/Desktop/code/appclient/node_modules/ui-kit/lib/components/H1/styled/H1.js:16:36
    at ke (/Users/user/Desktop/code/appclient/node_modules/ui-kit/node_modules/styled-components/dist/styled-components.cjs.js:1:17838)
    at e.generateAndInjectStyles (/Users/user/Desktop/code/appclient/node_modules/ui-kit/node_modules/styled-components/dist/styled-components.cjs.js:1:19353)
    at /Users/user/Desktop/code/appclient/node_modules/ui-kit/node_modules/styled-components/dist/styled-components.cjs.js:1:21658
    at /Users/user/Desktop/code/appclient/node_modules/ui-kit/node_modules/styled-components/dist/styled-components.cjs.js:1:21771
    at I (/Users/user/Desktop/code/appclient/node_modules/ui-kit/node_modules/styled-components/dist/styled-components.cjs.js:1:21998)
    at renderWithHooks (/Users/user/Desktop/code/appclient/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderForwardRef (/Users/user/Desktop/code/appclient/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5842:18)
    at renderElement (/Users/user/Desktop/code/appclient/node_modules/react-dom/cjs/react-dom-server.browser.development

如果我删除

styled-components

里面的库里面的

node_modules

应用程序开始按预期工作，因为它使用我的主应用程序的

styled-components

如果我遗漏了某些可能导致该问题的内容，请告诉我。如有必要，我也可以提供更多详细信息。谢谢！

Answer 1

最有可能的是，主应用程序中安装的样式组件版本与自定义库中存在的版本不同。

如果您希望软件包使用与主应用程序相同的

styled-component

，则必须在 

resolutions

 中使用 

package.json

 作为纱线，并使用 

overrides

 作为 

npm

 或 

pnpm

 来强制软件包安装程序安装您想要的样式组件版本，如下所示：

  "resolutions": {
    "styled-components": "The version of your main app"
  },
  "overrides": {
    "styled-components": "The version of your main app"
  }

package.json中的resolutions属性是什么？

包中的解决方案字段。 json 文件允许您指定项目中应使用的包的确切版本，即使您的项目并不直接需要该包。