Reactjs 如何在库组件和应用程序组件之间共享上下文？

我正在使用lerna创建一个monorepo，其中的结构如下：

root 
  packages
    application - Our root application 
    components  - Just some react components, that are to be used by the application

const {
    override,
    addWebpackAlias,
  } = require("customize-cra");

const path = require('path'); 

module.exports = override( 
    addWebpackAlias({
        react: path.resolve('./node_modules/react'), 
        //comment out the line below to reproduce the issue
        "@material-ui/styles": path.resolve("./node_modules/@material-ui/styles") 
    })
)

这是

我遇到的问题是，我正在使用Material UI及其主题功能，在应用程序根目录下，我们将有一个主题Provider：

import { ThemeProvider } from '@material-ui/styles';
//...

function App() {
  return (

  <ThemeProvider theme={theme}>
          <MyMaterialComponent/>
  </ThemeProvider>
  );
}

现在看来这一切都很直截了当。当我们在同一个包中运行这些代码时，它工作得很好。“样式”功能可以访问主题

但是当我从另一个包（我们的应用程序包）运行时，组件库不再具有对主题的访问权限（主题只是一个空对象）

我目前知道如何解决这个问题的唯一方法是，与我解决类似钩子问题的方法相同，即在我的应用程序中设置webpack别名配置，指导组件库共享相同的节点模块。().

即，使用react应用程序重新布线和自定义cra，我有一个config-overrides.js，如下所示：

root 
  packages
    application - Our root application 
    components  - Just some react components, that are to be used by the application

const {
    override,
    addWebpackAlias,
  } = require("customize-cra");

const path = require('path'); 

module.exports = override( 
    addWebpackAlias({
        react: path.resolve('./node_modules/react'), 
        //comment out the line below to reproduce the issue
        "@material-ui/styles": path.resolve("./node_modules/@material-ui/styles") 
    })
)

或者你可以手动管理你的网页来做类似的事情

所以这很好，但这不是一个特别令人满意的解决方案

特别是对于像Material UI这样的库，您希望用户能够使用组件库，而不会干扰他们的网页配置

---

所以我想我一定是做错了什么-你能告诉我吗

您可以通过将您的

@material ui/core

依赖项从devdependency放到库项目的peerdependency中来实现这一点。就我而言，这解决了我的问题

有关对等关系的更多信息：

---

好的，只有通过lerna符号链接使用库时，这可能是一个更大的问题，如果库发布到npm，那么就可以了。有人能证实吗？你找到这个了吗？“我现在遇到了和你一样的问题。@Hespen-我使用的是我在这里概述的解决方案，但是是的，这并不理想，我必须寻找一个更好的解决方案。我接下来要做的是看看其他开源库在做什么。