emotion css feature is not rendering the styles (React)

Question

I'm using Webpack 4, Babel 7 and Emotion 10.

I installed @emotion/core, @emotion/styled, and the recommended plugin babel-plugin-emotion.

styled is working properly. I can create a styled component and use it. However, if I try to use the native css`` feature it renders the object but not the styles.

import { css, jsx } from '@emotion/core';

const bold = css`
  font-weight: 'bold';
`;

render(
...
<div css={bold}>Something!</div>
...
)

If I inspect the markup, I see:

<div css="[object Object]">Something!</div>

If I use className instead of css, is the same. Also if I do it inline or if I use the css() feature.

And If I console.log() that Object the result is:

{
  "name": "15b6lyx-bold",
  "styles": "font-weight:'bold';label:bold;",
  "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkM6XFxwcmFjdGljZVxcbm9jcmFcXHNyY1xcQXBwLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCZ0IiLCJmaWxlIjoiQzpcXHByYWN0aWNlXFxub2NyYVxcc3JjXFxBcHAuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50IH0gZnJvbSAncmVhY3QnO1xyXG5pbXBvcnQgeyBjb25uZWN0IH0gZnJvbSAncmVhY3QtcmVkdXgnO1xyXG5cclxuaW1wb3J0IHsgZmV0Y2hDb21tZW50cyB9IGZyb20gJy4vYWN0aW9ucyc7XHJcbmltcG9ydCB7IGNzcywganN4IH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuXHJcbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9BcHAuY3NzJztcclxuaW1wb3J0IGNzc0luSnMgZnJvbSAnLi9BcHAuY3NzLmpzJztcclxuXHJcbmltcG9ydCByUEkgZnJvbSAnLi9pbWFnZXMvclBJLTQwMHg0MDAuanBnJztcclxuXHJcbmNvbnN0IENvbW1lbnRzQm94ID0gc3R5bGVkKCdkaXYnKWBcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiBsYXZlbmRlcjtcclxuYDtcclxuXHJcbmNvbnN0IGxpc3RJdGVtID0gY3NzYFxyXG4gIGxpc3Qtc3R5bGU6IG5vbmU7XHJcbiAgcGFkZGluZzogMDtcclxuYDtcclxuXHJcbmNvbnN0IGJvbGQgPSBjc3NgXHJcbiAgZm9udC13ZWlnaHQ6ICdib2xkJztcclxuYDtcclxuXHJcbmNsYXNzIEFwcCBleHRlbmRzIENvbXBvbmVudCB7XHJcbiAgY29tcG9uZW50RGlkTW91bnQoKSB7XHJcbiAgICB0aGlzLnByb3BzLmZldGNoQ29tbWVudHMoKTtcclxuICB9XHJcblxyXG4gIHJlbmRlckNvbW1lbnRzID0gKCkgPT4ge1xyXG4gICAgcmV0dXJuIHRoaXMucHJvcHMuY29tbWVudHMubWFwKGNvbW1lbnQgPT4ge1xyXG4gICAgICByZXR1cm4gPGxpIGtleT17Y29tbWVudC5pZH0+e2NvbW1lbnQubmFtZX08L2xpPjtcclxuICAgIH0pO1xyXG4gIH07XHJcblxyXG4gIHJlbmRlcigpIHtcclxuICAgIHJldHVybiAoXHJcbiAgICAgIDxkaXY+XHJcbiAgICAgICAgPGgxIHN0eWxlPXtjc3NJbkpzLnNlY3Rpb25UaXRsZX0+TGlzdCBvZiBjb21tZW50cyAxMDE8L2gxPlxyXG4gICAgICAgIDxDb21tZW50c0JveD57dGhpcy5yZW5kZXJDb21tZW50cygpfTwvQ29tbWVudHNCb3g+XHJcbiAgICAgICAgPGltZyBzcmM9e3JQSX0gYWx0PVwiUmFzcC4gUGkgTG9nb1wiIGNsYXNzTmFtZT17c3R5bGVzLnJQaX0gLz5cclxuICAgICAgICA8ZGl2IGNzcz17Y29uc29sZS5sb2coYm9sZCl9PlNvbWV0aGluZyE8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICApO1xyXG4gIH1cclxufVxyXG5cclxuY29uc3QgbWFwU3RhdGVUb1Byb3BzID0gKHsgY29tbWVudHMgfSkgPT4ge1xyXG4gIHJldHVybiB7XHJcbiAgICBjb21tZW50c1xyXG4gIH07XHJcbn07XHJcblxyXG5leHBvcnQgZGVmYXVsdCBjb25uZWN0KG1hcFN0YXRlVG9Qcm9wcywgeyBmZXRjaENvbW1lbnRzIH0pKEFwcCk7XHJcbiJdfQ== */"
}

Does anybody know what's going wrong?

童Michael · Accepted Answer · 2020-10-24 06:19:08Z

13

You might end up with class="[object Object]" in div element. If that is all your codes, you should add JSX pragma /** @jsx jsx */ thing on top before jsx module

/** @jsx jsx */
import { css, jsx } from '@emotion/core'

...

and no single quote at 'bold', it is not valid css writing style

https://emotion.sh/docs/css-prop

edited Oct 24, 2020 at 6:19

answered Dec 30, 2018 at 13:55

童Michael

1761 silver badge7 bronze badges

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

Comments

mohammad barzegar · Accepted Answer · 2021-06-13 18:44:19Z

6

you should add JSX pragma the top of the module like this:

/** @jsx jsx */

pragma might not work and you should use

 /** @jsxImportSource @emotion/react */

instead.

answered Jun 13, 2021 at 18:44

mohammad barzegar

3876 silver badges12 bronze badges

1 Comment

May'Habit Over a year ago

your worked but I try this doesn't work: "presets": [ [ "@babel/preset-react", { "runtime": "automatic", "importSource": "@emotion/react" } ] ]

Moffen · Accepted Answer · 2022-04-30 00:54:50Z

2

You need to make sure you have the JSX pragma compiler directive specified at the top of your file:

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@emotion/react'

See this tutorial for more info.

answered Apr 30, 2022 at 0:54

Moffen

2,0632 gold badges20 silver badges43 bronze badges

Comments

Skylar Brown · Accepted Answer · 2022-08-26 05:37:26Z

0

with create-react-app using @emotion/react 11, React 18, and Typescript 4.4, I was initially just getting css="[object Object]" in the DOM. Using the jsxImportSource pragma worked for me, but I did not want to add it to every file, so adding this to tsconfig.json instead worked for me:

// tsconfig.json
"compilerOptions": {
  ...,
  "jsxImportSource": "@emotion/react"
}

Just a few days layer I also ran into this exact same issue using rollup + esbuild (rollup-plugin-esbuild), and this solved it for me

esbuild({
  ...
  jsx: 'automatic',
  jsxImportSource: '@emotion/react',
}),

edited Aug 26, 2022 at 5:37

answered Aug 23, 2022 at 17:07

Skylar Brown

3,5022 gold badges16 silver badges7 bronze badges

Comments

Benji · Accepted Answer · 2023-09-30 14:30:16Z

Different front-end tooling provides various ways to transform JSX. Sometimes you need to provide an explicit way for the tool to handle the JSX. My problem was when using Vite. You can add a custom plugin in your plugins section in your vite.config.ts handle the jsxImportSource problem:

Add this as the first plugin in your plugins array:

    {
      name: 'add-emotion-jsx-pragma',
      enforce: 'pre',
      transform(code: string, id: string): TransformResult | null {
        if (/\.[jt]sx?$/.test(id)) {
          return {
            code: `/** @jsxImportSource @emotion/react */\n${code}`,
            map: null,
          };
        }
        return null;
      },
    },

Note, like others mentioned - you still need to add the following to your tsconfig

// tsconfig.json
"compilerOptions": {
  ...,
  "jsxImportSource": "@emotion/react"
}

Collectives™ on Stack Overflow

emotion css feature is not rendering the styles (React)

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related