Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

css prop not adding styles emotion 10 nextjs

See original GitHub issue

Can’t seem to get emotion to work following simple examples from docs.

I cloned the nextjs/with-emotion repo to start

And then I added:

css={css`
    background-color: red;
`}

to the first div under the <Head>

(looks like)

<div css={css`
  background-color: red;
`}>

Just following the doc example from here

But when I inspect in the browser the styles don’t get applied to the div and the dom node looks like:

<div css="[object Object]">...</div>

A stringified object…

I also try following the object syntax example: <div css={{ color: 'hotpink' }}>

doing: <div css:{{backgroundColor: 'red'}} />...<div> and the same thing happened.

What am I missing?

package.json

{
  "name": "emotion-test",
  "version": "1.0.0",
  "description": "testing-emotion",
  "main": "index.js",
  "author": "ohryan",
  "license": "MIT",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/core": "^10.0.7",
    "@emotion/styled": "^10.0.7",
    "next": "^8.0.1",
    "react": "^16.8.2",
    "react-dom": "^16.8.2"
  },
  "devDependencies": {
    "babel-plugin-emotion": "^10.0.7"
  }
}

.babelrc

{
  "presets": ["next/babel"],
  "plugins": ["emotion"]
}

Issue Analytics

State:
Created 5 years ago
Reactions:3
Comments:35 (7 by maintainers)

Top GitHub Comments

31reactions

reverse-engcommented, Jan 28, 2020

Just wanted to note I had this issue and adding /** @jsx jsx */ import { jsx } from ‘@emotion/core’;

fixed the error for me.

11reactions

orpheuscommented, Feb 22, 2019

So I got a basic css`` template literal style to work by adding:

"@emotion/babel-preset-css-prop" to my .babelrc presets following this

But now I’m confused because in this documentation

It says that css`` and css(…) are built in natively. So why do I need to add babel-preset-css-prop and why is babel-plugin-emotion and plugins": [“emotion”] not enough?

Top Results From Across the Web

What is the proper way to enable the css prop in Emotion 11 ...

If using the automatic runtime, you should be able to fix the issue by adding the following to your tsconfig.json .

The css Prop - Emotion

The primary way to style elements with emotion is the css prop. It provides a concise and flexible API to style your components....

Basic Features: Built-in CSS Support - Next.js

To add a stylesheet to your application, import the CSS file within pages/_app.js . For example, consider the following stylesheet named styles.css :...

Emotion - Server Side Rendering

Server side rendering in Emotion 10 has two approaches, each with their own ... The rendered output will insert a <style> tag above...

Home Page + Layout + CSS-in-JS (Emotion-JS) — Part #3 of 11

Next.js will automatically add the CSS file to the HTML. In production, a chunk hash is added so that styles are updated when...