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

Question

我有两个存储库fe和craft，分别是应用程序库和组件库。

两个存储库都可以自行编译。但是，当我尝试通过组件库使用组件时，如果组件本身props.theme在styled-components.

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.

来自Button.tsxcraft（不行，访问 props）。

import React, { ReactNode } from "react";
import { Button as BaseButton } from "@material-ui/core";
import styled from "styled-components";
import { ButtonText } from "../Typography/Typography";

const StyledButton = styled(BaseButton)`
  text-transform: none;
  width: fit-content;
  min-height: 40px;
  background: ${(props) => props.theme.colors.primary}; // Theme props used here.
  color: ${(props) => props.theme.colors.white};

  &:hover {
    background: ${(props) => props.theme.colors.blue500};
  }
`;


...


  return (
    <StyledButton>
      <ButtonText>{children}</ButtonText>
    </StyledButton>
    );
  }
};

export default Button;

来自craft（确定）的Typography.tsx 。

import styled from "styled-components";

export const Base = styled.span`
  font-family: Manrope;
  line-height: 1.5;
`;

export const HeadlineOne = styled(Base)`
  font-weight: 200;
  font-size: 5.875rem;
  letter-spacing: -1.5px;
`;

预览.js来自craft

...

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

App.tsx来自fe

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

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

export default App;

TypeError: Cannot read property 'primary' of undefined当我尝试运行主应用程序时，我得到了一个。

---

来自fe的package.json

"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（否dependencies，仅devDependencies）。

},
  "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",
    ...

---

我能解决这个问题的最接近的是这里的解决方案：https://github.com/styled-components/styled-components/issues/2379

我尝试了两者peerDependencies，yarn link但它们都不起作用。两个存储库具有相同的功能theme.js，并且都可以完美地访问props.theme本地。两者都有相同的版本styled-components。

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