@emotion/react | Npm Package Usage Trend

@emotion/react

> Simple styling in React.

🌟 @emotion/reactのREADME.mdにリアルタイム使用チャートを表示するには、以下のコードをコピーしてください。

## Usage Trend
[![Usage Trend of @emotion/react](https://npm-compare.com/img/npm-trend/THREE_YEARS/@emotion/react.png)](https://npm-compare.com/@emotion/react#timeRange=THREE_YEARS)

🌟 @emotion/reactのREADME.mdにGitHub Starsトレンドチャートを表示するには、以下のコードをコピーしてください。

## GitHub Stars Trend
[![GitHub Stars Trend of @emotion/react](https://npm-compare.com/img/github-trend/@emotion/react.png)](https://npm-compare.com/@emotion/react)

パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス

@emotion/react	9,658,208	17,910	817 kB	361	1年前	MIT

@emotion/react

Simple styling in React.

Install

yarn add @emotion/react

Usage

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

render(
  <div css={{ color: 'hotpink' }}>
    <div
      css={css`
        color: green;
      `}
    />
    <Global
      styles={{
        body: {
          margin: 0,
          padding: 0
        }
      }}
    />
    <ClassNames>
      {({ css, cx }) => (
        <div
          className={cx(
            'some-class',
            css`
              color: yellow;
            `
          )}
        />
      )}
    </ClassNames>
  </div>
)

More documentation is available at https://emotion.sh.