Use Emotion with React Typescript ^4.1

#react #typescript #emotion

Problem

Hello friends. I just spend over 20mins searching for the right way to configure react-typescript to get the emotion library working. And I couldn't find the single place where the answer lies.
So now that I gathered enough, you don't need to spend that time over such a simple issue.

Solution

1 - After you install the proper package "@emotion/react". You need to head over your tsconfig.json file and make sure you have the following lines under "compilerOptions":

    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react"

2 - Then as a requirement you must have these "comments" at the top of every .tsx file you want to use the css functionality.

/** @jsxRuntime classic */
/** @jsx jsx */

3 - Don't forget to always import { jsx } from '@emotion/react'

A complete usage example would be:

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, css } from "@emotion/react";

const App = () => {
  return (
    <div
      css={css`
        padding: 32px;
        background-color: hotpink;
        font-size: 24px;
        border-radius: 4px;
        &:hover {
          color: ${color};
        }
      `}
    >Hover to change color.</div>
  );
};

export default App;

There you go! If it was useful for you consider to smash that heart, that way I'll keep posting stuff.