{"record":{"id":"80016b7b7bf29559","repo":"emotion-js/emotion","slug":"strings-are-not-allowed-as-css-prop-values-please","errorCode":null,"errorMessage":"Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`${props.css}`","messagePattern":"Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`(.+?)`","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react/src/emotion-element.tsx","lineNumber":39,"sourceCode":"\ninterface EmotionProps {\n  css: Interpolation<Theme>\n  [typePropName]: React.ElementType\n  [labelPropName]?: string\n  [key: string]: unknown\n}\n\nexport const createEmotionProps = (\n  type: React.ElementType,\n  props: { css: Interpolation<Theme> }\n): EmotionProps => {\n  if (\n    isDevelopment &&\n    typeof props.css === 'string' &&\n    // check if there is a css declaration\n    props.css.indexOf(':') !== -1\n  ) {\n    throw new Error(\n      `Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css\\`${props.css}\\``\n    )\n  }\n\n  let newProps = {} as EmotionProps\n\n  for (let key in props) {\n    if (hasOwn.call(props, key)) {\n      newProps[key] = props[key as keyof typeof props]\n    }\n  }\n\n  newProps[typePropName] = type\n\n  // Runtime labeling is an opt-in feature because:\n  // - It causes hydration warnings when using Safari and SSR\n  // - It can degrade performance if there are a huge number of elements\n  //","sourceCodeStart":21,"sourceCodeEnd":57,"githubUrl":"https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/react/src/emotion-element.tsx#L21-L57","documentation":"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.","triggerScenarios":"Passing <div css=\"color: red;\"> or <div css={someStringWithColon}> using emotion's jsx import in development, where the string contains a ':' declaration.","commonSituations":"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.","solutions":["Wrap the string in the css template literal: css={`color: red`} from '@emotion/react'","Convert the string to an object: css={{ color: 'red' }}","If the value is truly a class name (no ':'), pass it via className instead of css","Ensure dynamic strings are parsed/serialized before being assigned to the css prop"],"exampleFix":"// before\n<div css=\"color: red; font-size: 12px\" />\n\n// after\n<div css={css`color: red; font-size: 12px`} />","handlingStrategy":"validation","validationCode":"function assertCssPropValue(v) {\n  if (typeof v === 'string' && v.includes(':')) {\n    throw new Error('css prop requires css`` from @emotion/react, not a plain string')\n  }\n}","typeGuard":"function isSerializedStyles(v) {\n  return v != null && typeof v === 'object' && typeof v.name === 'string' && typeof v.styles === 'string'\n}","tryCatchPattern":null,"preventionTips":["Always create css prop values with css`` or objects","Wrap dynamic style strings in css`...` before passing","In tests, render in development mode to surface string css props early"],"tags":["react","css-prop","development","string-styles"],"backgroundTag":"css-prop-string-not-allowed","analyzedSha":"b882bcba85132554992e4bd49e94c95939bbf810","analyzedAt":"2026-09-02T22:27:13.739Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}