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.
Top comments (0)