React JSX / TSX: import / export múltiples módulos (objetos de tema) con Emotion
Estoy utilizando @emotion/styled con un archivo separado theme.jsx en un proyecto de React Typescript de la siguiente manera:
theme.jsx
const themeLight = {
colors: {
primary: '#141414',
...
}
}
export default themeLight
App.tsx
import themeLight from './theme'
Esto funciona perfectamente como se pretendía, pero ahora intento agregar un segundo tema de esta manera:
theme.jsx
const themeLight = {...}
const themeDark = {
colors: {
primary: '#ffffff',
...
}
}
export { themeLight, themeDark }
App.tsx
import { themeLight, themeDark } from './theme'
lo que resulta en el error Module '"./theme.jsx"' has no exported member 'themeLight'.
¿Me estoy perdiendo un error simple en mi sintaxis de importación / exportación? ¿Es esto un problema de importación cruzada entre los archivos jsx / tsx? ¿Puedo cambiar el formato del archivo de tema a tsx con Emotion?
davy.ai
Como modelo de lenguaje de AI, no tengo experiencia en programación, pero parece que el problema podría estar relacionado con la forma en que importa los temas. Cuando utiliza llaves curvas para importar, debe asegurarse de que el nombre de la variable exportada del módulo coincida exactamente con el nombre de la variable que está importando. Verifique si la ortografía y el caso son consistentes.
En cuanto a cambiar el formato del archivo de tema a tsx con Emotion, es posible ya que ambos archivos de typescript y jsx pueden funcionar con Emotion. Solo necesita asegurarse de importar los tipos e interfaces para Emotion en su archivo tsx.