EmotionJS 组件库中的组件没有收到 Theme 道具答案

【问题标题】：Component from an EmotionJS Component library does not receive the Theme propEmotionJS 组件库中的组件没有收到 Theme 道具
【发布时间】：2021-02-03 12:06:16
【问题描述】：

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

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

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

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

然后，在任何 EmotionJS 项目中，我将导入主题和任何组件，并像往常一样将其与 Emotion 一起使用。

我直接在 repo 中构建并直接从 git 调用生成的组件。

目前，我收到以下错误

【问题讨论】：

标签： reactjs typescript next.js emotion

【解决方案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
  },
}

希望它有效！

【讨论】：