emotion: css prop returns [object, object]

emotion version: "@emotion/core": "^10.0.5", "@emotion/styled": "^10.0.5",
react version: 16.6.3

Relevant code:


const app = css({
	'.ant-btn-primary': {
		background: colors.highlight,
	},
});

<div css={app}>...</div>

package.json

{ "name": "app", "version": "0.1.0", "private": true, "dependencies": { "@emotion/core": "^10.0.5", "@emotion/styled": "^10.0.5", "antd": "^3.11.2", "jwt-decode": "^2.2.0", "react": "^16.6.3", "react-dom": "^16.6.3", "react-router-dom": "^4.3.1", "react-scripts": "2.1.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "devDependencies": { "react-localize-redux": "^3.5.1" } }

What you did:

I am trying to upgrade from v9 to 10 and all the class imports have stopped working.

What happened:

This is the output for all classes: <div css="[object Object]">...</div>

The image below shows you the output for css. styled components work as they should.

I am not sure what needs to happen for all the classes to work and not emotion return an array of objects.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 10
Comments: 19 (2 by maintainers)

Commits related to this issue

Update styling for emotion, add missing pragma gh-441 https://stackoverflow.com/questions/53803466/what-does-the-comment-jsx-jsx-do-in-the-emotion-css-in-js-library https://github.com/emotion-js/emo... — committed to douglasnaphas/madliberation by douglasnaphas 2 years ago

Most upvoted comments

@harmeetjaipur did you find the answer to this? Finding the same problem myself.

Adding following at top of the component files fixed it for me:

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

Typical syntax now for adding emotion styles is:

<div css={customStyle} className="button">Submit</div>

+26

harmeetjaipur on Dec 19, 2018

+1 - is there any way to not have to use pragma in a typescript project?

+21

strass on Apr 29, 2019

the /** @jsx jsx */ doesn't seem to work in @emotion/core@^10.0.10`, so…? what now? does emotion just not work in jsx?

worc on Sep 10, 2019

Same setup of @emotion/babel-preset-css-prop is working fine for a JavaScript-React project but not for a TypeScript-React project.

shahzaibkhalid on Mar 31, 2019

Was stuck on this too, and realized that I missed this in the Getting started docs

Instructions for the installing the recommended babel plugin

Basic steps to fix:

`npm i @emotion/babel-preset-css-prop
Add '@emotion/babel-preset-css-prop to your Babel config under presets

Or if you don’t want to (or can’t easily) use the Babel preset, you can add the /** @jsx jsx */ comment at the top of any file that uses the css function.

Hope this helps!

seanWLawrence on Mar 25, 2019

I can’t say why exactly it has not been working for you - but it was purely a configuration/usage issue. There is no difference between a file being in your app directory and in your node_modules.

Andarist on Jan 28, 2021