React JSX / TSX：使用 Emotion 导入/导出多个模块（主题对象）答案

【问题标题】：React JSX / TSX: import / export multiple modules (theme objects) with EmotionReact JSX / TSX：使用 Emotion 导入/导出多个模块（主题对象）
【发布时间】：2022-01-01 23:38:12
【问题描述】：

我在这样的 React Typescript 项目中使用 @emotion/styled 和一个单独的 theme.jsx 文件：

theme.jsx

const themeLight = {
  colors: {
    primary: '#141414',
    ...
  }
}
export default themeLight

App.tsx

import themeLight from './theme'

这完全符合预期，但现在我尝试添加第二个主题，如下所示：

theme.jsx

const themeLight = {...}
const themeDark = {
  colors: {
    primary: '#ffffff',
    ...
  }
}
export { themeLight, themeDark }

App.tsx

import { themeLight, themeDark } from './theme'

导致错误Module '"./theme.jsx"' has no exported member 'themeLight'。

我的导入/导出语法是否遗漏了一个简单的错误？这是 jsx / tsx 文件之间交叉导入的问题吗？我可以用 Emotion 将主题文件格式更改为 tsx 吗？

【问题讨论】：

出口/进口在我看来是正确的。将其更改为 .tsx 是否会破坏或修复任何内容？
@axium 谢谢。我试过这个但忘记重新启动编译器，呵呵。正确重命名为 tsx 和 setting up Types 后，它现在可以工作了。不知道为什么会出现最初的错误，但很高兴就这样吧！

标签： javascript reactjs typescript jsx emotion

【解决方案1】：

使用emotion.d.ts 文件将theme.jsx 重命名为theme.tsx 和setting up Types 解决了这个问题。

【讨论】：