es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Las propiedades CSS de Emotion no funcionan con Create-React-App

31 Jul, 2023 Programación

Quería usar Emotion con CRA, así que lo instalé siguiendo la documentación e intenté usar la propiedad css como se muestra en el ejemplo a continuación:

import { FC } from "react";
import { TypographyProps } from "./Typography.propTypes";
import * as styles from "./Typography.styles";

export const Typography: FC<typographyprops> = ({
  children,
}) => {
  return <h1 css="{styles.typography}">{children}</h1>;
};

pero no funcionó.

Al inspeccionar el código, encontré esto:

<h1 css="Has intentado convertir en cadena el objeto devuelto por la función `css`.
No se supone que se use directamente (por ejemplo, como valor de la propiedad `className`),
sino que se debe pasar a emotion para que lo maneje (por ejemplo, como valor de la propiedad `css`).">
Header</h1>

Intenté seguir la solución de este artículo de blog, pero aún no funcionó:
https://harryhedger.medium.com/quick-how-to-use-the-emotion-css-prop-with-create-react-app-5f6aa0f0c5c5

¿Hay algo que pueda hacer para solucionarlo?

¡Gracias!

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás intentando usar la propiedad css con Emotion en Create-React-App, pero estás encontrando problemas. El mensaje de error sugiere que estás intentando convertir en cadena el objeto devuelto por la función css, lo cual no es el uso correcto de esta propiedad.

    Para solucionar este problema, debes asegurarte de que tienes instalado Emotion correctamente y has añadido el plugin de Babel requerido. Puedes seguir los pasos mencionados en la documentación oficial aquí: https://emotion.sh/docs/create-react-app

    Una vez que hayas instalado y configurado Emotion correctamente, podrás utilizar la propiedad css como se muestra en tu ejemplo sin ningún problema. La propiedad css se utiliza para aplicar estilos al componente en línea y debe ser un objeto de estilo CSS válido o una cadena de texto.

    Si sigues teniendo problemas, puedes intentar depurar tu código comprobando si todas las dependencias requeridas están instaladas correctamente y si el plugin de Babel está funcionando como se espera. También puedes intentar utilizar un enfoque diferente para aplicar estilos, como usar un archivo CSS o la API styled proporcionada por Emotion.

    Espero que esto te ayude a solucionar el problema que estás teniendo con Emotion y Create-React-App. ¡Déjame saber si tienes alguna otra pregunta!

Comments are closed.