styled-componentsでReactコンポーネントをスタイリングする

  • ※ この記事はstyled-components v2を使用しています。
  • ソースコードはTypeScriptで記述しています。

もくじ

💅styled-componentsとは

ES6のテンプレート文字列(Tagged Template Literals) を使ってReactコンポーネントをスタイリングすることのできるライブラリーです。

styled_components document

少し前からAngularからReactに戻ってきて、現在はstyled-componentsを使って、Reactコンポーネントをスタイリングしています。 個人的に下記の点が気に入っています。

  • 別のCSSファイルにスタイルを命名して、それをimportする必要がない。
  • スタイルの定義をコンポーネント定義のすぐそばに記述することができる。
  • 汎用的なモジュールを記述でき、使いまわすことができる。
  • propsを渡してあげることで、微妙なスタイルのカスタマイズが可能。
  • Reactがサポートしているブラウザ対応のためのautoprefixerを自動でつけてくれる。 https://github.com/styled-components/styled-components/issues/856

さっそく見ていきましょう。

🍇インストール

# npm install --save styled-components

yarnをインストールしている場合は

yarn add styled-components

🥝基本的な使い方

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

/* 下記のスタイルを持つheaderタグのコンポーネントを作ります */ const MyHeader = styled.headerbackground-color: #7085FE; border-bottom: 1px solid #ccc; padding: 20px;;

/* 下記のスタイルを持つh1タグのコンポーネントを作ります */ const MyTitle = styled.h1font-size: 24px; text-align: center; color: #FEE970;;

/* 上記で生成したタグを使ってReactコンポーネントを作ります。/ export default () => ( <MyHeader> <MyTitle>Hello I am Styled Title!</MyTitle> </MyHeader> )

/ main.tsx */
import React from 'react'
import ReactDOM from 'react-dom'

import Basic from 'components/Basic'

ReactDOM.render( <Basic />, document.querySelector('#basic') );

描画結果

react styled-componentsベーシック描画結果

こんなふうに使うことができます。上記では、headerとh1タグのコンポーネントを生成しましたが、styled-componentsではbutton,input, div, section, mainなどの基本的なHTML5の要素が実装されています。

styled.div` ...`

styled.button...

styled.section...

styled.main...

下記、本家ドキュメントより

We define all valid HTML5 and SVG elements. (It's an automatic fat finger check too)

🌮Propsを渡して、スタイルを調整する

Propsを渡してスタイルを調整することもできます。

下記のようなstyled-componentsで作った buttonタグを用意します。 backColorというPropsが渡されれば、それをボタンの背景色として用いるようにします。

import styled from 'styled-components';

interface IProps { backColor?: string }

export default styled.buttoncolor: #FFF; font-size: 20px; margin: 10px; padding: 8px 20px; background-color: </span><span class="p">${(</span><span class="nx">props</span><span class="p">:</span> <span class="nx">IProps</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">props</span><span class="p">.</span><span class="nx">backColor</span> <span class="p">?</span> <span class="nx">props</span><span class="p">.</span><span class="nx">backColor</span> <span class="p">:</span> <span class="s1">'#555'</span><span class="p">}</span><span class="s2">;;

PassPropsという名前で作ったbuttonのコンポーネントをimportします。 importしたPassPropsに対して、backColorというpropsを渡します。

import React from 'react'
import ReactDOM from 'react-dom'

import PassProps from 'components/PassProps'

ReactDOM.render( <PassProps>No Props</PassProps>, document.querySelector('#props1') );

ReactDOM.render( <PassProps backColor={"#E91E63"}>Red</PassProps>, document.querySelector('#props2') );

ReactDOM.render( <PassProps backColor={"#3F51B5"}>Blue</PassProps>, document.querySelector('#props3') );

ReactDOM.render( <PassProps backColor={"#009688"}>Green</PassProps>, document.querySelector('#props4') );

すると、PropsとしてbackColorを渡したボタンは背景色が指定した色になっています。 渡さなかったPropsはデフォルトの背景色の#555が適用されています。

pass props to react styled-components

✨SCSSやPostCSSのmixinみたいな使い方をする

CSS設計でよくやるmixinの定義をJavaScript (TypeScript) でします。

/* colors.ts */
/* アプリ内部で使い回す色を定義 */

export default { brand: '#009688', fontGray: '#8d8d8d', linkColor: '#536DFE' }

/* medias.ts /
/ レスポンシブデザイン */

/* tabletで横幅767px以上のスタイルを定義します / / pcで横幅1200px以上のスタイルを定義します */

export default { tablet: (css: string) => ( @media screen and (min-width: 767px) { </span><span class="p">${</span><span class="nx">css</span><span class="p">}</span><span class="s2"> } ), pc: (css: string) => ( @media screen and (min-width: 1200px) { </span><span class="p">${</span><span class="nx">css</span><span class="p">}</span><span class="s2"> } ) }

これらを使っていきましょう。 普通にJavaScriptの関数として定義しているので下記のようにテンプレート文字列(Tagged Template Literals)の中で呼び出すことができます。

/* Mixin.tsx */

import styled from 'styled-components'; import colors from 'styles/colors' import medias from 'styles/medias'

export default styled.div` background-color: ${colors.brand}; color: ${colors.fontGray}; padding: 20px; width: 100%; margin: 0 auto; text-align: center; font-size: 16px;

${medias.tablet(font-size: 24px; width: 300px;) }

${medias.pc(font-size: 28px; width: 900px;) }
`
;

/* main.tsx */

import React from 'react' import ReactDOM from 'react-dom'

import Mixin from 'components/Mixin'

ReactDOM.render( <Mixin>hello Responsive Block</Mixin>, document.querySelector('#mixin') );

下記のように画面サイズに応じて、幅とフォントサイズが変化するブロックができました。

styled-components mixin例1

styled-components mixin例2

🎴参照

styled-componentsでは他にもスタイルの継承ができたり、一般的なReact ComponentのようにRefsを置けたり、テーマ機能、SSRなど多彩な機能を持っています。

🎮サンプルのダウンロード

読んでいただき、ありがとうございました。 最後に簡単なものですが、サンプルへのリンクを置いておきます。

サンプルの動かし方

# yarn install
# yarn run start
# Open http://localhost:8888
  • このエントリーをはてなブックマークに追加