CODEWITHSUNDEEP
cssreactjscreate-react-appemotion
Daikozi
Daikozi

Reputation: 211

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!

Upvotes: 4

Views: 3220

Answers (2)

Sabbir Ahmed
Sabbir Ahmed

Reputation: 1704

As mentioned in Emotion docs:

in order to use the css prop with TypeScript you have to configure the new JSX transform and the jsxImportSource TSConfig options (available since TS 4.1). For this approach, your TSConfig compilerOptions should contain:

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"

For most users, this is a required setup.

Upvotes: 0

Thomas
Thomas

Reputation: 146

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

/** @jsxImportSource @emotion/react */

Upvotes: 10

Related Questions