React で CSS を使うには styled-components や CSS Modules などの方法があります。

僕は React は修行中の身で styled-components をちょっとかじったくらいなのですが、最近何かの記事で styled-jsx というものを見て勉強中の今だからこそ試してみよう！と思いたちました。

ちょうどパワポカラオケ用のWebアプリで React を使っていたのでこのプロジェクトで試しました。

タイトルの「妥協なしの完全な CSS in JSX」はリポジトリの説明文「Full CSS support for JSX without compromises」の意訳です。

この記事は紹介程度のものなので詳しくはREADMEをご覧ください。

どんなの？

Hyper、Now の ZEIT プロダクトです。

コードはREADMEより。英語は意訳してます。

export default () => (
  <div>
    <p>この p タグはスタイルが適用されるよ :)</p>

    { /*子 <Component /> 内部の p タグには適用されない */ }

    <style jsx>{`
      p {
        color: red;
      }
    `}</style>
  </div>
)

コンポーネントの中の jsx 属性をつけた style タグにCSSを書いていく感じですね。
Vue や Shadow DOM の CSS の書き方に似てていいですね！
styled-components のようにスタイリングのために余計なコンポーネントを作る必要もなくなります。

機能

READMEのFeaturesより

パフォーマンスに影響しない完全なCSSのサポート
実行時のサイズは3kb (gzipした状態で, 元は12kb)
完全なセレクタ、アニメーション、キーフレームの隔離
組み込みのCSSベンダープレフィックス
早く、最小限で効率的なCSSトランジション高性能ランタイム
SSR以外の高パフォーマンスな実行時CSS注入
ソースマップ
動的CSSとテーマのサポート
プラグインを使ったCSSの処理

使い方

インストール

npmの場合

npm i -S styled-jsx

yarnの場合

yarn add styled-jsx

設定

.babelrcに以下の設定を追記します。

.babelrc

{
  "plugins": [
    "styled-jsx/babel"
  ]
}

完了です！

注：

Create React Appを使用する場合は eject する必要があります。
eject すると package.jsonの"babel"フィールドに Babel の設定があるのでそこに追記してください。

package.json（"babel"だけ抜粋）

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      "styled-jsx/babel"
    ]
  },

仕組み

styled-jsx は Babel プラグインでJSX内のクラスを被らないものに変えて、CSSのセレクタもそれに合わせています。

例

.wrapper → .wrapper.jsx-XXX (XXXはクラスごとに一意の数字)
img → img.jsx-XXX

使ってみた感想

やはり<style>で書けるのはきれいで気持ちいい。
サードパーティのコンポーネントを使うがちょい汚くなる
<style jsx>{ がリンターやフォーマッタに設定によっては引っかかる（自分はignoreしてる）
日本語の情報が全く無いのがつらかった。英語もまだ多いとは言えない……。
react-transition-group の CSSTransition がうまく動かない？（自分の書き方が悪いだけ？　うまいやり方があればコメントやTwitterで教えてください！）

最後に

QiitaのJSXシンタックスハイライト……

styled-jsx 「妥協なしの完全な CSS in JSX」

どんなの？

機能

使い方

インストール

設定

注：

仕組み

使ってみた感想

最後に