blog202012 emotioin

emotion.js

/** @jsx jsx */
import { css, jsx } from '@emotion/react'

const danger = css`
  color: red;
`

const base = css`
  background-color: darkgreen;
  color: turquoise;
`
const extended = css`
  ${base};  // 直接拡張
  text-decoration: underline;
`
render(
  <div>
    <div css={base}>This will be turquoise</div>
    <div css={[danger, base]}> // 配列で組み合わせることもできる
      some description
    </div>
    <span css={danger}>other description</div>
    {/* 別の種類のタグで有っても共通のクラスをつけたりすることも可能。 */}
    {/* あまりやらないと思いますが、できてしまう。 */}
    <div css={extended}>extended</div>
  </div>
)