Object styles in Emotion

Besides CSS strings, Emotion accepts styles written as JavaScript objects, which are easy to build and share in code.

All Emotion examples Emotion: usage and stats

Object styles 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

Objects instead of strings. card, heading and tag are ordinary objects with camelCase property names, passed straight to the css prop. [1]
A nested hover rule. The tag object has an "&:hover" key whose value is another style object, applied while a tag is hovered. [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 { jsx } 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).

// Plain JS objects as styles
const card = {
  background: "#1c1f26",
  color: "#e8eaf0",
  padding: "24px 28px",
  borderRadius: "14px",
  width: "340px",
  fontFamily: "system-ui, sans-serif",
};

const heading = { margin: "0 0 14px", fontSize: "19px", color: "hotpink" };

const tag = {
  display: "inline-block",
  margin: "4px",
  padding: "5px 12px",
  borderRadius: "999px",
  background: "#2a2f3a",
  fontSize: "14px",
  cursor: "pointer",
  "&:hover": { background: "hotpink", color: "black" },
};

const tags = ["react", "css-in-js", "emotion", "objects", "styles", "hover me"];

export default function App() {
  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "#111", fontFamily: "system-ui, sans-serif" }}>
      {jsx("div", { css: card },
        jsx("h3", { css: heading }, "Object styles"),
        tags.map((t) => jsx("span", { key: t, css: tag }, t)),
      )}
    </div>
  );
}

Ctrl/⌘ + Enter runs

Hover the tags: each one turns pink from the nested &:hover object. 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 The css prop 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 →