ツール

Babelプラグイン

このプラグインは、サーバーサイドレンダリング、スタイルの最小化、およびより優れたデバッグエクスペリエンスのサポートを追加します。

使用法

最初にbabel-pluginをインストールします

npm install --save-dev babel-plugin-styled-components

次に、次のようにbabel構成に追加します

注意

⚠️ .babelrcファイル内のプラグインの呼び出し順序が重要です。babel構成でenvプロパティを使用している場合、このプラグインをplugins配列に入れるだけでは不十分です。代わりに、最初に実行されるように、各envのplugins配列に入れる必要があります。詳細については、こちらを参照してください。

{
  "plugins": ["babel-plugin-styled-components"]
}

サーバーサイドレンダリング

このプラグインは、すべてのstyled componentに一意の識別子を追加することにより、クライアントとサーバーでの異なるクラス生成によるチェックサムの不一致を回避します。このプラグインを使用せずにstyled-componentsをサーバーサイドレンダリングしようとすると、Reactはリハイドレーション中にHTML属性の不一致警告を表示します。

ssrオプションを使用して、必要に応じて無効にすることができます

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": false
      }
    ]
  ]
}

より良いデバッグ

このオプションは、React DevToolsなしでDOM内のコンポーネントを識別するのに役立つ、より豊富な出力で各コンポーネントにアタッチされたCSSクラス名を強化します。ページソースには、<button class="Button-asdf123 asdf123" />が、<button class="asdf123" />の代わりに表示されます。

また、React DevToolsでコンポーネントのdisplayNameを確認することもできます。たとえば、MyButtonというbutton要素をレンダリングするstyled componentを作成することを検討してください。通常、DevToolsにはstyled.buttonとして表示されますが、displayNameオプションが有効になっている場合、指定した名前MyButtonが使用されます。

これにより、コンポーネントを見つけやすくなり、アプリ内のどこにあるかを把握しやすくなります。

この機能が必要ない場合は、displayNameオプションを使用して無効にできます

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": false
      }
    ]
  ]
}

コンポーネントのdisplayNameの制御

デフォルトでは、コンポーネントのdisplayNameには、コンポーネント名をできるだけ一意にするために、ファイル名がプレフィックスとして付加されます。

fileNameオプションを無効にすることで、コンポーネントのdisplayNameをコンポーネント名のみに強制できます

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "fileName": false
      }
    ]
  ]
}

これを行う可能性のある1つの例は、enzymeを使用してコンポーネントをテストすることです。常に.find(ComponentName)を使用できますが、.find("ComponentName")を使用してdisplayNameでコンポーネントを検索することも確実に可能です。後者の場合、fileNameオプションを無効にする必要があります。これをテスト専用に行う場合は、テスト環境下でのみ追加してください。

意味のないファイル名を制御する

一般的なパターンは、コンポーネントをButton.jsxではなく、Button/index.jsxに配置することです。デフォルトでは、fileNameオプションがtrueに設定されている場合、プラグインはファイル名（<button class="index-asdf123 asdf123" />）の代わりに、ディレクトリ名（<button class="Button-asdf123 asdf123" />）を使用して表示名を生成します。これは、前者の方がより多くの情報を提供するためです。

meaninglessFileNamesオプションを使用すると、styled componentの機能の説明に関連しないファイル名のリストをカスタマイズできます。したがって、代わりにディレクトリ名を使用する必要があります

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "meaninglessFileNames": ["index", "styles"]
      }
    ]
  ]
}

たとえば、リストにstylesを追加すると、styled componentをButton/styles.jsファイルに保存できるようになります。

このオプションのデフォルトは["index"]です。

fileNameまたはdisplayNameのいずれかがfalseに設定されている場合、このオプションは無効です。

最小化

このプラグインでは、2種類の最小化が実行されます。1つはCSSからすべての空白とコメントを削除し、もう1つはタグ付きテンプレートリテラルをトランスパイルして、バンドルから貴重なバイト数を削減します。

必要に応じて、babel構成でこの動作を無効にできます

{
  "plugins": [
    ["babel-plugin-styled-components", {
      "minify": false,
      "transpileTemplateLiterals": false
    }]
  ]
}

デッドコードの削除

styled componentsがトランスパイルおよび構築される方法により、デフォルトでは、副作用があると想定されるため、ミニファイアはデッドコードの削除を適切に実行できません。ただし、「pureアノテーション」と呼ばれるこのプロセスを支援するために有効にできる機能があります。

{
  "plugins": [
    ["babel-plugin-styled-components", {
      "pure": true
    }]
  ]
}

これは、一部のミニファイアが前述の問題を克服するために使用する#__PURE__ JSコメントを使用して、各styled componentとライブラリヘルパーにタグを付けるためにbabelヘルパーを利用します。

テンプレート文字列のトランスパイル

このプラグインは、styled-componentsタグ付きテンプレートリテラルを、Babelが通常作成するものよりも小さい表現にトランスパイルします。

待ってください、タグ付きテンプレートリテラルをトランスパイルするのですか？Babelはこれをネイティブに行いませんか？ 🤔 Babelを使用すると、古いブラウザのサポートのために、ES2015 + JavaScriptをES5準拠のコードにトランスパイルしている可能性があります。最も一般的に推奨されるベースBabelプリセット（es2015 / env / latest）には、タグ付きテンプレートリテラルを古いブラウザで動作させるためのbabel-plugin-transform-es2015-template-literals変換が含まれています。ただし、注意点があります。その変換の出力は非常に冗長です。これは、仕様要件を満たすために行われています。

以下は、babel-preset-latestで処理されたトランスパイルされたコードの例です

var _templateObject = _taggedTemplateLiteral(['width: 100%;'], ['width: 100%;'])
function _taggedTemplateLiteral(strings, raw) {
  return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } }))
}
var Simple = _styledComponents2.default.div(_templateObject)

styled-components は完全な仕様互換性を必要としません。当社の Babel プラグインは、styled コンポーネントに付随するテンプレートリテラルを、古いブラウザでも動作しつつ、フットプリントが大幅に小さくなるように、わずかに異なる、より小さな形式に変換します。

以下は、styled-components babel プラグインが有効で、{ transpileTemplateLiterals: true } オプションが指定された場合の前の例です。

var Simple = _styledComponents2.default.div(['width: 100%;'])

このプラグインは、他のライブラリやユースケースに属するタグ付きテンプレートリテラルを変更しないように賢く処理します。

// Following will be converted:
styled.div``
keyframe``
css```some text` // But this will not be converted:


// Here the outer template literal will be converted
// because it's attached to the component factory,
// but the inner template literals will not be touched:
styled.div`
  color: ${light ? `white` : `black`};
`

この機能は、transpileTemplateLiterals オプションで無効にできます。

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "transpileTemplateLiterals": false
      }
    ]
  ]
}

詳細については、専用セクションのタグ付きテンプレートリテラルをご覧ください。

名前空間

名前空間は、クラス名がユニークであることを保証します。この設定は、クラス名の衝突が発生する可能性のあるマイクロフロントエンドで作業している場合に便利です。

必要に応じて、babel の設定でこの動作を有効にできます。

{
  "plugins": [
    ["babel-plugin-styled-components", {
      "namespace": "my-app"
    }]
  ]
}

以下は、namespace を有効にして処理されたトランスパイルされたコードの例です。

_styledComponents2.default.div.withConfig({
  displayName: 'code__before',
  componentId: 'my-app__sc-3rfj0a-1',
})(['color:blue;'])
注意

⚠️ この機能はバージョン 1.11 以降で利用可能です。

SWC プラグイン

このプラグインは、styled-components を SWC コンパイラで使用する際のサーバーサイドレンダリング、スタイルの最小化、およびより優れたデバッグエクスペリエンスのサポートを追加します。

使用法

まず、@swc/plugin-styled-components パッケージと @swc/core パッケージをインストールします。

npm install --save-dev @swc/plugin-styled-components @swc/core

次に、.swcrc 設定ファイルにプラグインを追加します。

{
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-components",
          {
            "displayName": true,
            "ssr": true
          }
        ]
      ]
    }
  }
}

オプション

  • displayName:
    • 説明: React DevTools を使用せずに、DOM 内でコンポーネントを識別できるように、各コンポーネントの CSS クラス名をよりリッチな出力で強化します。また、React DevTools でコンポーネントの displayName を確認することもできます。
    • タイプ: Boolean
    • デフォルト: true
    • 値: true または false
  • ssr:
    • 説明: クライアントとサーバーでの異なるクラス生成によるチェックサムの不一致を回避するために、すべてのスタイリングされたコンポーネントに一意の識別子を追加します。サーバーサイドレンダリング（SSR）に役立ちます。
    • タイプ: Boolean
    • デフォルト: true
    • 値: true または false
  • fileName:
    • 説明: コンポーネントの displayName にファイル名をプレフィックスとして付けるか、コンポーネント名のみにするかを制御します。
    • タイプ: Boolean
    • デフォルト: true
    • 値: true または false
  • meaninglessFileNames:
    • 説明: スタイリングされたコンポーネントの機能の説明に関連しないファイル名のリストをカスタマイズできます。代わりにディレクトリ名を使用します。
    • タイプ: 文字列の配列
    • デフォルト: ["index", "styles"]
    • 値: 無意味なファイル名を表す文字列の任意の配列。
  • minify:
    • 説明: すべての空白とコメントを削除して CSS を最小化します。また、タグ付きテンプレートリテラルをより小さい表現に変換します。
    • タイプ: Boolean
    • デフォルト: true
    • 値: true または false
  • transpileTemplateLiterals:
    • 説明: styled-components のタグ付きテンプレートリテラルをより小さな表現に変換します。バンドルサイズを小さくするのに役立ちます。
    • タイプ: Boolean
    • デフォルト: true
    • 値: true または false
  • pure:
    • 説明: スタイリングされたコンポーネントでデッドコード除去プロセスを支援する「純粋なアノテーション」という機能を有効にします。
    • タイプ: Boolean
    • デフォルト: false
    • 値: true または false
  • namespace:
    • 説明: クラス名がユニークであることを保証します。クラス名の衝突が発生する可能性のあるマイクロフロントエンドを使用する場合に役立ちます。
    • タイプ: 文字列
    • デフォルト: undefined
    • 値: 目的の名前空間を表す任意の文字列。

サーバーサイドレンダリング

このプラグインは、すべてのスタイリングされたコンポーネントに一意の識別子を追加することで、クライアントとサーバーでの異なるクラス生成によるチェックサムの不一致を回避します。このプラグインを使用せずに、スタイリングされたコンポーネントをサーバーサイドレンダリングしようとすると、React はリハイドレーション中に HTML 属性の不一致警告を表示します。

ssr オプションを false に設定することで、この機能を無効にできます。

{
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-components",
          {
            "ssr": false
          }
        ]
      ]
    }
  }
}

より良いデバッグ

このオプションは、React DevTools を使用せずに、DOM 内でコンポーネントを識別できるように、各コンポーネントの CSS クラス名をよりリッチな出力で強化します。また、React DevTools でコンポーネントの displayName を確認することもできます。

この機能が不要な場合は、displayName オプションを false に設定することで無効にできます。

{
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-components",
          {
            "displayName": false
          }
        ]
      ]
    }
  }
}

コンポーネントのdisplayNameの制御

デフォルトでは、コンポーネントのdisplayNameには、コンポーネント名をできるだけ一意にするために、ファイル名がプレフィックスとして付加されます。

fileNameオプションを無効にすることで、コンポーネントのdisplayNameをコンポーネント名のみに強制できます

{
 "jsc": {
   "experimental": {
     "plugins": [
       [
         "@swc/plugin-styled-components",
         {
           "fileName": false
         }
       ]
     ]
   }
 }
}

意味のないファイル名を制御する

一般的なパターンとして、コンポーネントを Button/index.jsx に配置する代わりに Button.jsx に配置することがあります。デフォルトでは、fileName オプションが true に設定されている場合、プラグインはファイル名（<button class="index-asdf123 asdf123" />）ではなく、ディレクトリ名（<button class="Button-asdf123 asdf123" />）を使用して displayName を生成します。これは、前者の方がより多くの情報を提供するためです。

meaninglessFileNames オプションを使用すると、スタイリングされたコンポーネントの機能の説明に関連しないファイル名のリストをカスタマイズでき、代わりにディレクトリ名を使用する必要があります。

{
 "jsc": {
   "experimental": {
     "plugins": [
       [
         "@swc/plugin-styled-components",
         {
           "meaninglessFileNames": ["index", "styles"]
         }
       ]
     ]
   }
 }
}

最小化

このプラグインは、すべての空白とコメントを削除して CSS を最小化します。また、タグ付きテンプレートリテラルをより小さい表現に変換し、貴重なバイトをバンドルから除外します。

必要に応じて、minify オプションを false に設定することで、この動作を無効にできます。

{
 "jsc": {
   "experimental": {
     "plugins": [
       [
         "@swc/plugin-styled-components",
         {
           "minify": false,
           "transpileTemplateLiterals": false
         }
       ]
     ]
   }
 }
}

デッドコードの削除

スタイリングされたコンポーネントがどのように変換および構築されるかにより、デフォルトでは、ミニファイアは副作用があることが前提となるため、それらに対するデッドコード除去を適切に実行できません。ただし、「純粋なアノテーション」と呼ばれるこのプロセスを支援するために有効にできる機能があります。

{
 "jsc": {
   "experimental": {
     "plugins": [
       [
         "@swc/plugin-styled-components",
         {
           "pure": true
         }
       ]
     ]
   }
 }
}

テンプレート文字列のトランスパイル

Babel プラグインと同様に、このプラグインは styled-components のタグ付きテンプレートリテラルを、SWC が通常作成するものよりも小さい表現に変換します。これは、バンドルサイズの削減に役立ちます。

transpileTemplateLiterals オプションを false に設定することで、この機能を無効にできます。

{
 "jsc": {
   "experimental": {
     "plugins": [
       [
         "@swc/plugin-styled-components",
         {
           "transpileTemplateLiterals": false
         }
       ]
     ]
   }
 }
}

名前空間

namespace オプションは、クラス名がユニークであることを保証します。これは、クラス名の衝突が発生する可能性のあるマイクロフロントエンドを使用する場合に便利です。

この動作を有効にするには、構成で namespace オプションを設定します。

{
 "jsc": {
   "experimental": {
     "plugins": [
       [
         "@swc/plugin-styled-components",
         {
           "namespace": "my-app"
         }
       ]
     ]
   }
 }
}

Babelマクロ
v4v5

注意

この機能は、使用率の低さと他の消費者にとって不必要な肥大化のため、v6.1 で削除されました。詳細

Babel マクロは、create-react-app のようなゼロ構成プロジェクトで、高度なコード変換を可能にするフル機能のオプションとして急速に勢いを増しています。

スキャフォールドが babel-plugin-macros で設定されている場合は、styled-components の代わりに新しい styled-components/macro インポートを使用するだけです。

import styled, { createGlobalStyle } from 'styled-components/macro'


const Thing = styled.div`
  color: red;
`


const GlobalStyle = createGlobalStyle`
  body {
    color: 'white';
  }
`

このマクロは、当社の babel プラグインのすべての機能を組み込みながら、取り出されていないツールがビルドプロセスの Babel 部分を処理できるようにします。これを実現してくれた Luc Leray (@lucleray) に感謝します！

実験的設定

babel-plugin-macros は、cosmiconfig を使用して、インポートファイルからディレクトリをさかのぼって、次のいずれかのファイルに配置できる babel-plugin-macros 設定を読み込みます。

  • .babel-plugin-macrosrc
  • .babel-plugin-macrosrc.json
  • .babel-plugin-macrosrc.yaml
  • .babel-plugin-macrosrc.yml
  • .babel-plugin-macrosrc.js
  • babel-plugin-macros.config.js
  • package.json の babelMacros

次に、当社の babel プラグインと同じオプションを styledComponents エントリで指定できます。

// babel-plugin-macros.config.js
module.exports = {
  // ...
  // Other macros config
  styledComponents: {
    pure: true,
  },
}

詳細については、babel-plugin-macros の EXPERIMENTAL 設定を参照してください。

マクロインポートの強制

プロジェクト全体でオブジェクトが一貫してマクロからインポートされるようにしたい場合があります。これは、ESLint のno-restricted-importsルールを使用することで実現できます。

"no-restricted-imports": [
  "error",
  {
    "paths": [{
      "name": "styled-components",
      "message": "Please import from styled-components/macro."
    }],
    "patterns": [
      "!styled-components/macro"
    ]
  }
]

TypeScript プラグイン

typescript-plugin-styled-componentsは、より優れたデバッグエクスペリエンスを提供する TypeScript 用のプラグインです。

注意

⚠️ TypeScript では、コマンドラインコンパイラ tsc からプラグインやトランスフォーマーを直接使用することはできません。そのため、このプラグインは TypeScript ローダーのいずれかを使用する webpack などのビルドツールチェーンでのみ動作します。もしよろしければ、プラグインを tsc に導入するためのオープンな issueがあるので、賛成票を投じてください！

ドキュメントについては、プロジェクトの GitHub リポジトリを参照してください。

Jest 連携

Jest Styled Componentsは、Jestで Styled Components をテストするためのユーティリティセットです。このパッケージは、スナップショットテストのエクスペリエンスを向上させ、スタイルルールに関する期待を表明するためのまったく新しいマッチャーを提供します。

インストール

npm install --save-dev jest-styled-components

スナップショットテスト

Styled Components を使用して UI を構築する場合、出力が予期せず変化しないようにする必要があります。スナップショットテストは React コンポーネントをテストする優れた方法であり、このパッケージはスナップショットにスタイルを追加することで、さらに快適なエクスペリエンスを提供します。

以下はテストの例です

import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'


const Button = styled.button`
  color: red;
`


test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toMatchSnapshot()
})

以下は結果のスナップショットの例です

exports[`it works 1`] = `
.c0 {
  color: red;
}


<button
  className="c0"
/>
`

実際のデモについては、このウェブサイトのリポジトリを確認してください。

toHaveStyleRule

特定のスタイルが要素に適用されているかどうかだけを確認したい場合は、toHaveStyleRule マッチャーを使用できます。この関数は、プロパティ（文字列）と値（文字列または RegExp）の 2 つの必須パラメータと、at-rule 内にネストされたルールを検索したり、クラスセレクターに修飾子を追加するためのオプションのオブジェクトを受け取ります。

import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'


const Button = styled.button`
  color: red;
  @media (max-width: 640px) {
    &:hover {
      color: green;
    }
  }
`


test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toHaveStyleRule('color', 'red')
  expect(tree).toHaveStyleRule('color', 'green', {
    media: '(max-width: 640px)',
    modifier: ':hover',
  })
})

Stylelint

styled componentsをstylelintでリントしましょう！

インストール

stylelint v15 以降の場合（推奨）

初めて stylelint (v15+) を設定しますか？次の手順に従ってください

必要となるもの

npm install --save-dev \
  stylelint \
  stylelint-config-standard \
  postcss-styled-syntax

プロジェクトのルートに .stylelintrc ファイルを追加します。

{
  "extends": [
    "stylelint-config-standard"
  ],
  "customSyntax": "postcss-styled-syntax"
}

stylelint v14 以下の場合

必要となるもの

注意

CSS 構文エラーに関する正しい行番号を報告できる機能が追加されているため、Stylelint v9 以降を使用することを推奨します。

npm install --save-dev \
  stylelint \
  stylelint-processor-styled-components \
  stylelint-config-styled-components \
  stylelint-config-recommended

プロジェクトのルートに .stylelintrc ファイルを追加します。

{
  "processors": [
    "stylelint-processor-styled-components"
  ],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ]
}

セットアップ

stylelint を実行する必要があります。stylelint を実行し、すべての styled components への glob を指定する lint:css スクリプトを package.json に追加します。

{
  "scripts": {
    "lint:css":"stylelint './src/**/*.js'"
  }
}
注意

プロセッサは styled-components を含まない JavaScript ファイルを無視するため、JavaScript（または TypeScript）に制限する限り、範囲が広すぎることを心配する必要はありません。

これで、スクリプトを実行して CSS をリントできるようになりました！🎉

npm run lint:css
注意

Stylelint の --fix オプションは、バージョン 15 以降で同じルールで動作します。

Webpack

別のコマンドとしてではなく、ビルド時にリントする場合は、webpack 用のstylelint-custom-processor-loaderを使用できます。

stylelint-config-styled-components

このプロセッサを使用すると、no-empty-sourceやno-missing-end-of-source-newlineのように、回避できないエラーをスローする stylelint ルールがいくつかあります。また、no-vendor-prefix ルールのように、適用する必要があるルールもいくつかあります。（styled-components はコードに自動的にベンダープレフィックスを付けるため、手動で行う必要はありません）

stylelint-config-styled-componentsは、競合を引き起こすルールを自動的に無効にします。

注意

カスタム .stylelintrc で共有設定で定義されたルールをオーバーライドできます。

他のライブラリとの使用

他のライブラリの中には、タグ付きテンプレートリテラルを使用した styled.x パターンを実装しているものもあります。このプロセッサは、styled キーワードを使用している限り、それらのタグ付きテンプレートリテラルの CSS もリントします。

別のライブラリでプロセッサを使用したいが、キーワードも変更したい場合（たとえば、styled.div の代わりに cool.div を書きたい場合）は、moduleName オプションを使用します

import cool from 'other-library';


const Button = cool.button`
  color: blue;
`;

{
  "processors": [
    [
      "stylelint-processor-styled-components",
      {
        "moduleName": "other-library"
      }
    ]
  ]
}
注意

この二重配列は意図的なものですが、オプションを設定する場合にのみ必要です。 プロセッサ構成ドキュメントを参照してください。

注意

公式にサポートしているのは styled-components のみですが、他のライブラリもプロセッサの恩恵を受けられることを願っています。

補間タグ付け ( stylelint-processor-styled-components を使用)

時々、CSSに問題がないにもかかわらず、stylelintがエラー（例：CssSyntaxError）をスローすることがあります。これは多くの場合、補間、より具体的には、プロセッサが何を補間しているかを知らないことが原因です。

簡単な例

const something = 'background';


const Button = styled.div`
  ${something}: papayawhip;
`;

スタイルに補間がある場合、プロセッサはそれらが何であるかを知ることができないため、適切な推測を行い、構文的に同等のプレースホルダー値に置き換えます。stylelintはコードフロー解析ツールではないため、これはすべてのエッジケースをカバーしておらず、プロセッサは時々間違えます。

補間タグ付けを使用すると、プロセッサが間違って推測した場合に、補間が何であるかをプロセッサに伝えることができます。その後、タグに基づいて、構文的に正しい値で補間を置き換えることができます。

例

const something = 'background';


const Button = styled.div`
  // Tell the processor that "something" is a property
  ${/* sc-prop */ something}: papayawhip;
`;

これで、プロセッサはsomething補間がプロパティであることを認識し、リントのために補間をプロパティに置き換えることができます。

補間をタグ付けするには、補間の開始または終了のいずれかにコメントを追加します。（${/* sc-tag */ foo} または ${bar /* sc-tag */}）タグはsc-で始まり、指定されている場合、タグは補間が何であるかについてのプロセッサの推測をオーバーライドします。

タグ

サポートされているタグの完全なリスト

  • sc-block
  • sc-selector
  • sc-declaration
  • sc-property
  • sc-value
注意

語彙が不明な場合は、例を挙げてこの CSS 語彙リストを参照してください。

たとえば、別の styled component を補間する場合、実際に補間するのはその一意のセレクターです。プロセッサはそれを認識しないため、リント時にセレクターに置き換えるように指示できます。

const Wrapper = styled.div`
  ${/* sc-selector */ Button} {
    color: red;
  }
`;

コードの混乱を避けるために、省略形のタグを使用することもできます。例

const Wrapper = styled.div`
  ${/* sc-sel */ Button} {
    color: red;
  }
`;

sc-custom

sc-custom は、最後の手段としてエスケープハッチとして使用することを目的としています。可能な限り、標準タグを使用してください。

上記の標準タグに加えて、プロセッサには、より独自で一般的でないエッジケースに対応できるようにするsc-customタグもあります。sc-customタグを使用すると、プレースホルダー値を自分で決定できます。

例

// Switch between left and right based on language settings passed through via the theme
const rtlSwitch = (props) => (props.theme.dir === 'rtl' ? 'left' : 'right');


const Button = styled.button`
  background: green;
  // Tell the processor to replace the interpolation with "left"
  // when linting
  margin-${/* sc-custom "left" */ rtlSwitch}: 12.5px;
`;

構文に関する注意

JS / CSS 内からルールをオフにする

stylelint-disable コメントを使用してルールをオフにします（許可されているすべての構文については、stylelint ドキュメントを参照してください）。タグ付きテンプレートリテラル内外の両方で使用できます。

import React from 'react';
import styled from 'styled-components';


// Disable stylelint from within the tagged template literal
const Wrapper = styled.div`
  /* stylelint-disable */
  background-color: 123;
`;


// Or from the JavaScript around the tagged template literal
/* stylelint-disable */
const Wrapper = styled.div`
  background-color: 123;
`;

テンプレートリテラルのスタイルとインデント

stylelint がインデントルールを正しく適用するためには、プロセッサはスタイルに対して少し独断的なプリプロセスを実行する必要があります。これにより、公式にサポートするのは 1 つのインデントスタイルのみとなります。（サポートされているスタイルは、すべてのドキュメントに示されている「デフォルト」のスタイルです）

重要なのは、次のように、インデントのベースレベルに終了バッククォートを配置することです

正しい

if (condition) {
  const Button = styled.button`
    color: red;
  `;
}

間違っている

if (condition) {
  const Button = styled.button`
    color: red;
`
}

if (condition) {
  const Button = styled.button`
    color: red;`
}

他のタグ付きテンプレートリテラルスタイルが偶然サポートされている場合もありますが、上記スタイルが使用されていない限り、インデントに関する問題は処理されません。

Styled Theming

styled-themingを使用して、styled component のテーマを作成します

入門ブログ記事をご覧ください

インストール

最初にbabel-pluginをインストールします

npm install --save styled-theming

例

import React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import theme from 'styled-theming'


const boxBackgroundColor = theme('mode', {
  light: '#fff',
  dark: '#000',
})


const Box = styled.div`
  background-color: ${boxBackgroundColor};
`


export default function App() {
  return (
    <ThemeProvider theme={{ mode: 'light' }}>
      <Box>Hello World</Box>
    </ThemeProvider>
  )
}

API

<ThemeProvider>

styled-components ドキュメントを参照してください

<ThemeProvider> は styled-components の一部ですが、styled-theming には必須です。

import { ThemeProvider } from 'styled-components'

<ThemeProvider> は、文字列またはゲッター関数のいずれかを持つオブジェクトを渡す必要がある単一のプロパティthemeを受け入れます。例

<ThemeProvider theme={{ mode: "dark", size: "large" }}>
<ThemeProvider theme={{ mode: modes => modes.dark, size: sizes => sizes.large }}>

一般に、アプリのルートに<ThemeProvider>を設定する必要があります

function App() {
  return (
    <ThemeProvider theme={...}>
      {/* rest of your app */}
    </ThemeProvider>
  );
}

theme(name, values)

テーマ設定のほとんどは、この関数を使用して行われます。

name は、<ThemeProvider> テーマのキーの 1 つと一致する必要があります。

;<ThemeProvider theme={{ whatever: '...' }} />

theme("whatever", {...});

values は、<ThemeProvider> テーマに提供された値によってキーの 1 つが選択されるオブジェクトである必要があります。

<ThemeProvider theme={{ mode: "light" }} />
<ThemeProvider theme={{ mode: "dark" }} />


theme("mode", {
  light: "...",
  dark: "...",
});

このオブジェクトの値には、任意の CSS 値を使用できます。

theme("mode", {
  light: "#fff",
  dark: "#000",
});


theme("font", {
  sansSerif: '"Helvetica Neue", Helvetica, Arial, sans-serif',
  serif: 'Georgia, Times, "Times New Roman", serif',
  monoSpaced: "Consolas, monaco, monospace",
});

これらの値は、CSS 値を返す関数にすることもできます。

theme('mode', {
  light: props => props.theme.userProfileAccentColor.light,
  dark: props => props.theme.userProfileAccentColor.dark,
})

theme は、styled-component のstyled関数で値として使用できる関数を作成します。

import styled from 'styled-components'
import theme from 'styled-theming'


const backgroundColor = theme('mode', {
  light: '#fff',
  dark: '#000',
})


const Box = styled.div`
  background-color: ${backgroundColor};
`

theme.variants(name, prop, themes)

追加の prop を介して選択される同じコンポーネントのバリアントを作成すると便利なことがよくあります。

テーマ設定でこれを簡単にするために、styled-theming はtheme.variants関数を提供します。

import styled from "styled-components";
import theme from "styled-theming";


const backgroundColor = theme.variants("mode", "variant", {
  default: { light: "gray", dark: "darkgray" },
  primary: { light: "blue", dark: "darkblue" },
  success: { light: "green", dark: "darkgreen" },
  warning: { light: "orange", dark: "darkorange" },
});


const Button = styled.button`
  background-color: ${backgroundColor};
`;


Button.propTypes = {
  variant: PropTypes.oneOf(["default", "primary", "success", "warning"])
};


Button.defaultProps = {
  variant: "default",
};


<Button />
<Button variant="primary" />
<Button variant="success" />
<Button variant="warning" />

構文の強調表示

テンプレートリテラルで CSS を記述するときに失っていたものの 1 つは、構文の強調表示です。すべてのエディターで適切な構文の強調表示を実現するために努力しています。現在、Atom、Visual Studio Code、WebStorm、および間もなく Sublime Text をサポートしています。

適切に強調表示すると、次のようになります

Syntax highlighted styled component

Atom

@gandm さん（language-babel の作成者）が、Atom での styled-components のサポートを追加しました！

適切な構文ハイライトを得るには、JavaScript ファイル用に language-babel パッケージをインストールして使用するだけです！

Sublime Text

@garetmckinley さんによる PR が babel-sublime にマージされましたが、Package Control にはリリースされていません。ただし、こちらの issue に記載されているように、GitHub から直接インストールできます。

もう一つの選択肢は、Alexandre Borela さんによる Naomi です。これは、Sublime Text 3 の構文ハイライト定義のコレクションで、styled-components をすぐにサポートしています。

Visual Studio Code

@gandm さんの language-babel は、Michael McDermott さんによって Babel JavaScript という名前で VSCode に移植されました。これは、styled-components を含む Babel の構文ハイライトのためのオールインワンソリューションを提供します。

現在の JavaScript の構文ハイライトを維持したい場合は、vscode-styled-components 拡張機能を使用すると、JavaScript ファイル内で styled-components の構文ハイライトを提供できます。これは、Marketplace から通常どおりインストールできます。

VIM / NeoVim

vim-styled-components プラグインは、JavaScript ファイル内で構文ハイライトを提供します。Plug、Vundle、Pathogen などの通常使用するプラグインマネージャーでインストールしてください。

また、素晴らしい JavaScript 構文パッケージを探しているなら、YAJS.vim は間違いありません。

WebStorm、IntelliJ IDEA、PhpStorm、PyCharm、および RubyMine

webstorm-styled-components プラグインは、テンプレート文字列内の CSS プロパティと値のコード補完とハイライトを追加します。また、補間内の JavaScript シンボルのコード補完とナビゲーションも提供します。IDE からインストールできます。Preferences | Plugins に移動し、Styled Components を検索してください。

その他のエディター

他のエディターで構文ハイライトをサポートするには、皆様のご協力が必要です！これらの構文ハイライトはすべて Styled Components コミュニティによって構築されたため、お使いのエディターの構文ハイライトの作成を始めたい場合は、ぜひ見てみたいです。

次のページに進みます

よくある質問