emotion-js/emotion · error · Error

Strings are not allowed as css prop values, please wrap it i

Error message

Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`${props.css}`

What it means

The css prop on emotion's jsx runtime must be a serialized object/template result, not a plain string. A string containing a CSS declaration (':') in development throws with instructions to use the css`` template literal from @emotion/react. Plain strings are disallowed because they bypass class registration and hashing.

Source

Thrown at packages/react/src/emotion-element.tsx:39

interface EmotionProps {
  css: Interpolation<Theme>
  [typePropName]: React.ElementType
  [labelPropName]?: string
  [key: string]: unknown
}

export const createEmotionProps = (
  type: React.ElementType,
  props: { css: Interpolation<Theme> }
): EmotionProps => {
  if (
    isDevelopment &&
    typeof props.css === 'string' &&
    // check if there is a css declaration
    props.css.indexOf(':') !== -1
  ) {
    throw new Error(
      `Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css\`${props.css}\``
    )
  }

  let newProps = {} as EmotionProps

  for (let key in props) {
    if (hasOwn.call(props, key)) {
      newProps[key] = props[key as keyof typeof props]
    }
  }

  newProps[typePropName] = type

  // Runtime labeling is an opt-in feature because:
  // - It causes hydration warnings when using Safari and SSR
  // - It can degrade performance if there are a huge number of elements
  //

View on GitHub (pinned to b882bcba85)

Solutions

1. Wrap the string in the css template literal: css={`color: red`} from '@emotion/react'
2. Convert the string to an object: css={{ color: 'red' }}
3. If the value is truly a class name (no ':'), pass it via className instead of css
4. Ensure dynamic strings are parsed/serialized before being assigned to the css prop

Example fix

// before
<div css="color: red; font-size: 12px" />

// after
<div css={css`color: red; font-size: 12px`} />

function assertCssPropValue(v) {
  if (typeof v === 'string' && v.includes(':')) {
    throw new Error('css prop requires css`` from @emotion/react, not a plain string')
  }
}

function isSerializedStyles(v) {
  return v != null && typeof v === 'object' && typeof v.name === 'string' && typeof v.styles === 'string'
}

When it happens

Trigger: Passing <div css="color: red;"> or <div css={someStringWithColon}> using emotion's jsx import in development, where the string contains a ':' declaration.

Common situations: Migrating from the classnames/inline-style props or styled-components string API; reading style strings from props/CMS data and passing them directly to css; older @emotion/styled string usage ported to the css prop.

Related errors

• css can only be used during render
• cx can only be used during render
• noComponentSelectorMessage
• [ThemeProvider] Please return an object from your theme func
• [ThemeProvider] Please make your theme prop a plain object

AI-assisted analysis of emotion-js/emotion@b882bcba85 (2026-09-02). Data as JSON: /api/errors/80016b7b7bf29559. Report an issue: GitHub.