Custom JSX pragma
What is JSX
JSX is an XML-like syntax extension to JavaScript.
It's a syntax sugar usually used for React's createElement function.
// example JSX <div> <Button onClick={handleClick}>Hello</Button> </div>
React.createElement( 'div', null, React.createElement( Button, { onClick: handleClick, }, 'Hello' ) )
/** @jsx jsx */ import { jsx } from 'my-custom-jsx'
/** convert a style object to a CSS class name */ const className = style({color: 'red'});
CSS-in-Js
<span attrs={{ class: style({ color: "blue" }) }} /> // or <span className={{ "class-1": true, "class-2": true }} />
<p css={{ margin: 0, fontSize: 12, color: 'black' }} />
Emotion,
styled-components,
etc
https://codesandbox.io/s/ts-in-css-talk-dynamic-styles-meter-css-prop-f908w
https://codesandbox.io/s/ts-in-css-talk-responsive-props-fbdtg
By Aleksandra Sikora