The css prop in Emotion

The css prop puts styles straight on an element, without creating a styled component first, and the template can use JavaScript values.

All Emotion examples Emotion: usage and stats

The css prop in Emotion: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Style elements directly. css`...` builds the style and the css prop applies it to the div, with no separate component. [1]
Interpolate a value. ${color} inside the template reads the color state, so clicking a colour button changes the hover colour. [1]
Why jsx() is called directly. The README uses the /** @jsx jsx */ pragma so JSX goes through Emotion's jsx. This editor compiles JSX with React's own runtime, so the example calls jsx(type, props, ...children) for the elements that use css. [2]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { useState } from "react";
import { jsx, css } from "@emotion/react";

// The css prop is read by Emotion's jsx(). This editor compiles JSX with React's own
// runtime, so elements that use css are created with jsx(type, props, ...children).

const colors = ["white", "gold", "aquamarine", "black"];

export default function App() {
  const [color, setColor] = useState("white");

  // a JS value interpolated into the template literal
  const box = css`
    padding: 32px;
    background-color: hotpink;
    font-size: 24px;
    border-radius: 4px;
    font-family: system-ui, sans-serif;
    &:hover {
      color: ${color};
    }
  `;

  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "#111", fontFamily: "system-ui, sans-serif" }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 18 }}>
        {jsx("div", { css: box }, "Hover to change color.")}
        <div style={{ display: "flex", gap: 8 }}>
          {colors.map((c) => (
            <button key={c} onClick={() => setColor(c)}
              style={{ padding: "6px 12px", borderRadius: 6, cursor: "pointer", fontSize: 13,
                border: c === color ? "2px solid hotpink" : "2px solid #333", background: "#1c1f26", color: "#e8eaf0" }}>
              {c}
            </button>
          ))}
        </div>
        <span style={{ color: "#a9b0c0", fontSize: 13 }}>Hover colour: {color}</span>
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Pick a colour under the box, then hover the pink box to see it. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with @emotion/react 11.14.0, react 19.3.0, react-dom 19.3.0, @emotion/styled 11.14.1. Needs WebGL.

More Emotion examples

Styled components with Emotion Object styles in Emotion Nested selectors in Emotion Media queries in Emotion

Sources

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with Emotion? Ask AgentGid →