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.

[harmeetjaipur]

@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>

[strass]

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