Javascript 在另一个应用程序中使用本地组件库时，未定义的道具主题，其中的组件使用了ThemeProvider

我有两个存储库

fe

和

craft

，分别是应用程序和组件库

两个存储库都可以自行编译。但是，当我试图通过组件库使用组件时，如果组件本身在

样式化组件中使用
props.theme
，则它将不起作用

Main.tsx来自
fe

import React from "react";
import { Button, HeadlineOne } from "handcraft";

const Page = (props: any) => {
  console.log(props.theme);

  return (
    <>
      <Button onClick={() => {}}>Sample</Button> // This causes TypeError: Cannot read property 'primary' of undefined.
      <HeadlineOne>Sample</HeadlineOne> // This is fine.
    </>
    );
   };

export default Page.


import React from "react";
import { ThemeProvider } from "styled-components";
import theme from "./utils/theme";

const App = () => (
  <ThemeProvider theme={theme}>
    <Page />
  </ThemeProvider>
);

export default App;

排版。tsx来自
craft
（确定）

preview.js来自
craft

...

addDecorator((story) => (
  <StylesProvider injectFirst>
    <ThemeProvider theme={theme}>{story()}</ThemeProvider>
  </StylesProvider>
));

我得到一个
TypeError：当我尝试运行主应用程序时，无法读取未定义的
的属性“primary”


package.json来自
fe

"dependencies": {
    ...
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "styled-components": "^5.1.1",

package.json来自
craft
（没有
依赖项
，只有
依赖项
）


我最接近解决这个问题的方法是这里的解决方案：

我尝试了两种
peerDependencies
，
纱线链接
，但都不起作用。两个回购协议都具有相同的
theme.js
，并且都可以在本地完美地访问
props.theme
。两者都有相同版本的
样式化组件

如何将外部库中的主题组件导入到具有相同库和主题的应用程序中

import React from "react";
import { ThemeProvider } from "styled-components";
import theme from "./utils/theme";

const App = () => (
  <ThemeProvider theme={theme}>
    <Page />
  </ThemeProvider>
);

export default App;

"dependencies": {
    ...
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "styled-components": "^5.1.1",

},
  "peerDependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    ...