cssreactjscreate-react-appemotion

Emotion's CSS props not working with Create-React-App

I wanted to use Emotion with CRA so I installed it following the documentation and tried to use the css prop as shown in the example below :

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>;
};

but it didn't work.

By inspecting the code, I found this :

<h1 css="You have tried to stringify object returned from `css` function. 
It isn't supposed to be used directly (e.g. as value of the `className` prop), 
but rather handed to emotion so it can handle it (e.g. as value of `css` prop).">
Header</h1>

I tried following the solution from this blog article, but still didn't work : https://harryhedger.medium.com/quick-how-to-use-the-emotion-css-prop-with-create-react-app-5f6aa0f0c5c5

Any thing I can do to fix it?

Thanks!

Solution

  • The easiest way to fix this is to add the following line at the beginning of your file.

    /** @jsxImportSource @emotion/react */