How to use the css of emotion with typescript?

Question

I use emotion in a create-react-app with Typescript and I would like to use the css prop of emotion.

Following their best practices I would like to define my styles in a const outside of my components, like so:

import { css } from "@emotion/react";

const myStyle = css({
  backgroundColor: "red",
  display: "inline-block",
  height: 24,
  width: 24
});

export default function App() {
  return <div css={myStyle}></div>;
}

I followed their instructions for setting up the css prop with Typescript and configured my Typescript compiler options like so:

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

however the style is not applied and instead a div containing the following message is rendered:

<div 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)."></div>

Why are the styles not applied?

I also made a basic sample on codesandbox.

This one works /** @jsxImportSource @emotion/react */ inside App.tsx — Ivan Shumilin
– Ivan Shumilin, Commented Jul 26, 2022 at 15:04
I see. Apparently this is an issue with create-react-app: github.com/facebook/create-react-app/issues/9847. But the documentation of emotion is confusing, too: github.com/emotion-js/emotion/issues/2662 — frankenapps
– frankenapps, Commented Jul 26, 2022 at 15:17
I had the same issue. Use the JSX Pragma in each file or set it global if possible. emotion.sh/docs/css-prop#jsx-pragma FYI I switched to Vite where it works fine. — julian.a
– julian.a, Commented Jan 31, 2023 at 11:43

aisyahnnd · Accepted Answer · 2022-07-26 15:58:15Z

2

You can try to import @emotion/css package, not @emotion/react, you can pass the className yourself.

like the code below:

import { css } from "@emotion/css";

const myStyle = css({
  backgroundColor: "red",
  display: "inline-block",
  height: 24,
  width: 24
});

export default function App() {
  return <div className={myStyle}>Some text here</div>;
}

for more details you can read the documentation https://emotion.sh/docs/typescript

answered Jul 26, 2022 at 15:58

aisyahnnd

915 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

frankenapps Over a year ago

This does not allow me to use the css prop. Instead I'd have to use the className prop.

gunslingor Over a year ago

I'm so confused at this point... ripping emotion out of my app, doesn't seem to play since with typescript, react-bootstrap, other class names or anything really. All brand new react app modern updated everything... spent 3 hours trying to get a emotion class to combine with a bootstrap class, started in emotion css and moved to the react package, not going back, just giving up.

Collectives™ on Stack Overflow

How to use the css of emotion with typescript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related