来自 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。

我直接构建到 repo 中并直接从 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
  },
}

希望有用！

来自 EmotionJS 组件库的组件不接收 Theme 道具

Component from an EmotionJS Component library does not receive the Theme prop

emotion

typescript

reactjs

next.js