Emotion - TypeScript

CRANK

Emotion includes TypeScript definitions for @emotion/core and @emotion/styled. These definitions also infer types for css properties with the object syntax, HTML/SVG tag names, and prop types.@emotion/coreimport { css } from '@emotion/core' const titleStyle = css({ boxSizing: 'border-box', width: 300, height: 200 }) const subtitleStyle = css` box-sizing: border-box; width: 100px; height: 60px; `TypeScript checks css properties with the object style syntax using csstype package, so following code will emit errors.import { css } from '@emotion/core'; const titleStyle = css({ ^ Argument of type 'boxSizing: 'bordre-box';' is not assignable [...] boxSizing: 'bordre-box', width: 300, height: 200, });To make the css prop work with pure TypeScript (without babel plugin) you need to add /** @jsx jsx */ at the top of every file that is using the css prop: import { css, jsx } from '@emotion/core'As a result you may be not able to use react fragment short…