もくじ
ReactでのCSS
ReactでCSSを指定するには以下の4通りがあります。
今回ご紹介するのはこの一番最後、CSS in JSを使ったスタイル手法になります。他の手法については他の方のブログやサイトをご確認ください。
styled-componentsとは
CSS in JS（JavaScriptを使用したCSSを記述するスタイル手法）のライブラリで、ES6とCSSを最大限に活用してストレスなくアプリをスタイルできます。
今最も人気のライブラリらしいです。
注意：この機能は React の一部ではありません。サードパーティのライブラリ群により提供される機能です。React はスタイルがどのように定義されているかには関心を持ちません。
出典：公式サイト
公式サイトによると「使ってもいいけど詳しくは知らんよ」ってことなので、記述方法などを検索する際はReactではなくstyled-componentsというワードで検索したほうが見つかる可能性がより広がると思います。
styled-components 導入手順
1.インストール
styled-componentsをインストールするのに必要なコマンドは1つだけで、これで準備が整います。
$ npm install --save styled-components
2.インポートする
$ import styled from 'styled-components'
Reactstrapを導入した時と同様にimportして使います。
3.定義
cosnt クラス名 = styled.要素名`CSSの指定`
上記が基本構文になります。
今回は通常ボタンのスタイルに赤文字の太字を指定してみます。
cosnt SampleButton = styled.button` color: red; font-weight: bold; `
4.DOM要素に追加
定義したクラス名をタグとして使用できます。
<クラス名>ボタンに表示するテキスト</クラス名>
↓実際のコード
<SampleButton>ボタン</SampleButton>
5.完成
ブラウザで確認するとこのように表示されています。
通常のボタンと比較すると、赤文字の太字になっているのがわかります。
左が通常のbutton、右が定義したButtonです。
Reactstrapを併用する
1.Reactstrap、styled-componentsの準備を整える
Reactstrapについてはこちらの記事をご参考ください。
2. 双方ともインポート
引き続きボタンを例に紹介します。
import styled from 'styled-components'
import {Button} from 'reactstrap'
3.定義
cosnt クラス名 = styled(Reactstrapののコンポーネント名)`CSSの指定`
styled-componentsの時は少し違います。じゃあ何が違うねんとなりますよね。
それは.要素名か(コンポーネント名)というところです。.にすると、通常のスタイルを継承し、()はコンポーネントを継承するところの違いになります。
const ReactstrapButton = styled(Button)` font-weight: bold; height: 50px; `
styled(Button)によってReactstrapのButtonのスタイルをそのまま継承し、その上でさらに自己流にアレンジできるようになります。
4.DOM要素に追加
これはstyled-componentsの時と同様です。
<クラス名>ボタンに表示するテキスト</クラス名>
↓実際のコード
<ReactstrapButton>リアクトストラップボタン</ReactstrapButton>
5.完成
表示するボタンのテキストをわかりやすいように変更しました。
指定したスタイルがそれぞれ反映されました。
