emotion css feature is not rendering the styles (React) emotion css feature is not rendering the styles (React) reactjs reactjs

emotion css feature is not rendering the styles (React)


You might end up with class="[object Object]" in div element. If that is all your codes,you should add JSX pragma /** @jsx jsx */ thing on top before jsx module

/** @jsx jsx */import { css, jsx } from '@emotion/core'...

and no single quote at 'bold', it is not valid css writing style

https://emotion.sh/docs/css-prop


you should add JSX pragma the top of the module like this:

/** @jsx jsx */

pragma might not work and you should use

 /** @jsxImportSource @emotion/react */

instead.


Remove the single quote in the bold attribute

const bold = css`  font-weight: bold;`;