reactjs - EmotionJS 组件库中的组件未收到 Theme 属性

Question

我正在创建一个基于 Emotion 和 Typescript 的组件库。
但是，当我使用 EmotionJS 和 NextJS 将组件导入到不同的项目中时，它不接受 Theme 属性。

这是组件存储库:
https://github.com/wilsonmsalberto/emotionjs-component-library

这是我重现错误的存储库:
https://github.com/wilsonmsalberto/emotionjs-component-library-nextjs

我的目标是使用组件存储库来拥有多个主题和多个组件。

然后，在任何 EmotionJS 项目中，我都会导入主题和任何组件，并像平常一样在 Emotion 中使用它。

我直接构建到存储库中并直接从 git 调用生成的组件。

目前，我收到以下错误

Answer 1

据我所知，您的问题与在库和nextJS应用程序之间正确解析node_modules有关(可能从不同的node_modules实例化2个不同的提供程序)。

这在处理本地链接包时更常见，但我认为你在这里也有类似的问题。请参阅https://github.com/emotion-js/emotion/issues/1107了解更多详情。

要解决此问题，请尝试配置 nextJS 的 webpack 以在本地解决情感依赖问题，方法是将其放入 <app_root>/next.config.js .

const path = require('path');

module.exports = {
  webpack: (config) => {

    // resolve "@emotion/core" and related dependencies locally
    config.resolve.alias['@emotion/core'] = path.resolve('./node_modules/@emotion/core');
    config.resolve.alias['@emotion/styled'] = path.resolve('./node_modules/@emotion/styled');
    config.resolve.alias['emotion-theming'] = path.resolve('./node_modules/emotion-theming');

    return config
  },
}

希望它有效!