Styling React App with Emotion

• Install Emotion packages into your React App by running the command inside the React project directory:

  npm install --save @emotion/react @emotion/styled

• Add following to tsconfig.json

  {
    "compilerOptions": {
      ...
      "jsx": "react-jsx",
      "jsxImportSource": "@emotion/react",
      ...
    }
  }

• At the top of your .tsx file, insert line:

  /** @jsxImportSource @emotion/react */

see also

• TS2322: Property 'css' does not exist...
• Emotion CSS Prop and Nextjs new JSX runtime - error: pragma and pragmaFrag cannot be set when runtime is automatic
• https://mudandmoss.medium.com/solving-you-have-tried-to-stringify-object-returned-from-css-function-error-from-emotion-in-react-50b3a70ed650
• Emotion: Using both a class and the "css" method in "className" prop