时间戳

首页 > 解决方案 > 如何在库组件和我的应用程序组件之间共享上下文？

reactjs - 如何在库组件和我的应用程序组件之间共享上下文？

问题描述

我正在使用 lerna 创建一个 monorepo，其中我有这样的结构：

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

这是一个有效的 Github，其中包含一个简单的示例。

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

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

function App() {
  return (

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

稍后在库组件中，我们使用主题，在我们的例子中使用makeStyles钩子。

import React from 'react';
import { makeStyles } from '@material-ui/styles';
import Card from "@material-ui/core/Card";

const useStyles = makeStyles(theme => {
    console.log(theme); //When this component doesn't have access to the theme, this is `{}`
    return {
        root: {
            //color: theme.palette.primary.main  //will error
        }
    }
});

export function MyMaterialComponent({ }) {
    const classes = useStyles();
    return (<Card>
            <span className={classes.root}>This is some component</span>
        </Card>
    );

}

现在这似乎很简单。当我们在同一个包中运行此代码时，它工作正常。该样式功能可以访问主题。

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

我目前知道如何解决这个问题的唯一方法，与我解决类似钩子问题的方法相同，即在我的应用程序中设置 webpack 别名配置，以指导组件库共享相同的节点模块。（请参阅此 Github 线程和建议的解决方案）。

IE。使用 react-app-rewired 和 customize-cra 我有一个 config-overrides.js 看起来像这样：

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") 
    })
)

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

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

特别是对于像 Material-UI 这样的库，您希望用户能够使用您的组件库，而不会让他们弄乱他们的 webpack 配置。

所以我想我一定是在这里做错了什么——你能告诉我什么吗？

标签： reactjsmaterial-uireact-contextlerna

解决方案

您可以通过将@material-ui/coredevDependencies 到 peerDependencies 的依赖项放在库的项目中来实现这一点。就我而言，这解决了我的问题。

有关 peerDependencies 的更多信息：

https://classic.yarnpkg.com/en/docs/dependency-types/#toc-peerdependencies

推荐阅读