{"record":{"id":"bafee3512cbd2e62","repo":"emotion-js/emotion","slug":"css-can-only-be-used-during-render","errorCode":null,"errorMessage":"css can only be used during render","messagePattern":"css can only be used during render","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react/src/class-names.tsx","lineNumber":146,"sourceCode":"export interface ClassNamesContent {\n  css(template: TemplateStringsArray, ...args: Array<CSSInterpolation>): string\n  css(...args: Array<CSSInterpolation>): string\n  cx(...args: Array<ClassNamesArg>): string\n  theme: Theme\n}\n\nexport interface ClassNamesProps {\n  children(content: ClassNamesContent): React.ReactNode\n}\n\nexport const ClassNames = /* #__PURE__ */ withEmotionCache<ClassNamesProps>(\n  (props, cache) => {\n    let hasRendered = false\n    let serializedArr: SerializedStyles[] = []\n\n    let css: ClassNamesContent['css'] = (...args) => {\n      if (hasRendered && isDevelopment) {\n        throw new Error('css can only be used during render')\n      }\n\n      let serialized = serializeStyles(args, cache.registered)\n      serializedArr.push(serialized)\n      // registration has to happen here as the result of this might get consumed by `cx`\n      registerStyles(cache, serialized, false)\n      return `${cache.key}-${serialized.name}`\n    }\n    let cx = (...args: Array<ClassNamesArg>) => {\n      if (hasRendered && isDevelopment) {\n        throw new Error('cx can only be used during render')\n      }\n      return merge(cache.registered, css, classnames(args))\n    }\n    let content = {\n      css,\n      cx,\n      theme: React.useContext(ThemeContext)","sourceCodeStart":128,"sourceCodeEnd":164,"githubUrl":"https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/react/src/class-names.tsx#L128-L164","documentation":"Inside the ClassNames component, the css() callback may only be invoked while the component is rendering. After render completes (hasRendered = true), calling css() in development throws, because the generated class would never be attached to the output. Deferred calls (in event handlers, effects, timeouts, async callbacks) are invalid.","triggerScenarios":"Calling the css function from the ClassNames render prop inside useEffect, setTimeout, event handlers, or promises; memoizing and calling the css callback after the first render.","commonSituations":"Building class names in a click handler; generating styles asynchronously after data loads; storing the css function and reusing it after mount.","solutions":["Call css() only within the ClassNames render-prop body during render","Precompute the serialized class during render, store the returned class string, and use that string in callbacks","If styles depend on later state, trigger a re-render and compute classes in the render body","Use the css prop or a styled component for dynamic post-render styling needs"],"exampleFix":"// before\n<ClassNames>{({ css }) => {\n  useEffect(() => { el.className = css({ color: 'red' }) }, [])\n  return <div />\n}}</ClassNames>\n\n// after\n<ClassNames>{({ css, cx }) => {\n  const cls = css({ color: 'red' })\n  useEffect(() => { el.className = cls }, [cls])\n  return <div />\n}}</ClassNames>","handlingStrategy":"validation","validationCode":"// ensure css() is invoked during render\nlet rendering = true\nfunction guardCss(fn) { return (...a) => { if (!rendering) throw new Error('css called outside render'); return fn(...a) } }","typeGuard":null,"tryCatchPattern":"try {\n  const cls = cssFn(styles)\n} catch (e) {\n  if (e.message === 'css can only be used during render') {\n    // recompute during render or fall back to static class\n  } else throw e\n}","preventionTips":["Call css()/cx() only inside the ClassNames render-prop body","Store generated class strings, not the css function, for later use","Code-review effects/handlers for deferred css() calls"],"tags":["react","class-names","render-phase","development"],"backgroundTag":"css-called-outside-render","analyzedSha":"b882bcba85132554992e4bd49e94c95939bbf810","analyzedAt":"2026-09-02T22:27:13.739Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}