reactjs - 来自 EmotionJS 组件库的组件未收到 Theme Prop

Question

我正在创建一个基于 Emotion 和 Typescript 的组件库。
但是，当我使用 EmotionJS 和 NextJS 在不同的项目中导入组件时，它不接受 Theme Prop 。
这是组件仓库:
https://github.com/wilsonmsalberto/emotionjs-component-library
这是我重现错误的仓库:
https://github.com/wilsonmsalberto/emotionjs-component-library-nextjs
我的目标是使用组件存储库来拥有多个主题和多个组件。
然后，在任何 EmotionJS 项目中，我都会导入主题和任何组件，并像往常一样与 Emotion 一起使用它。
我直接构建到 repo 中并直接从 git 调用生成的组件。
目前，我收到以下错误

Answer 1

据我所知，您的问题与在 libs 和 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
  },
}

希望它有效!