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

Posted 2023-02-22

【中文标题】React JSX / TSX：使用 Emotion 导入/导出多个模块（主题对象）

【英文标题】：React JSX / TSX: import / export multiple modules (theme objects) with 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 后，它现在可以工作了。不知道为什么会出现最初的错误，但很高兴就这样吧！

【参考方案1】：

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