React.jsのスタイル設定の基礎とStyled Componentsの使い方

インラインスタイルで設定する方法

一つ目はHTMLタグのスタイル属性に直接書くインラインスタイルの設定方法です。
通常のHTMLコーディングはちょっと邪道っぽくてあまり使わないかもしれませんが、Reactアプリケーションのサンプルとかには結構使われています。

JSXでインラインスタイルを設定する場合は、JavaScriptのオブジェクト形式で記述します。
JSXで式や変数を表示する場合は波括弧（{}）で囲み、スタイルはオブジェクトで記述するのでさらに波括弧で囲みます。
例えばh1の文字色を赤にする場合は次のようになります。

<div>
	<h1 style={{ color: 'red' }}>React.js スタイル設定</h1>
</div>

もう一つ項目を追加してみましょう。今度は文字サイズです。
注意するところはしつこいですがオブジェクト形式なので、プロパティの繋ぎは「,」でプロパティ名は「-（ハイフン）」は使えないので、キャメルケースで記述します。
文字サイズはfont-sizeなので、この場合はfontSizeとなります。
それとサイズは数値で指定した場合は「px」が自動的に付きます。

<div>
	<h1 style={{ color: 'red', fontSize: 30 }}>React.js スタイル設定</h1>
</div>

設定したスタイルは普通のオブジェクトなので、一度変数に入れてから使うこともできます。

const titleStyle = { color: 'red', fontSize: 30 };
 
const App: React.FC = () => {    
    return (
        <div>
            <h1 style={titleStyle}>React.js スタイル設定</h1>
        </div>
    )
}

外部CSSファイルを読み込んでクラスで設定する方法

普通のHTMLだとCSSは外部ファイルで作って読み込んでクラスで設定するというのが一般的ですよね。
Reactでもこの方法は使えますが、やっぱりちょっとだけ違います。

例えばApp.cssファイルを作り、titleクラスを作ります。

App.css

.title { color: red; }

このファイルを読み込むにはインポートで読み込みます。
（通常のHTMLのようにlink hrefでも大丈夫です。）

そしてJSXでクラスを指定する場合は、JavaScriptではclassは予約語なので使えません、classNameを使います。

import './App.css'
 
const App: React.FC = () => {    
    return (
        <div>
            <h1 className="title">React.js スタイル設定</h1>
        </div>
    )
}

クラスの切り替え

ただスタイルを設定するだけではつまらないので、JavaScript特有のイベントによってクラスを切り替えるということをやってみましょう。

タイトルをクリックすると文字色を切り替えてみます。
まずはスタイルを追加します。
is-blueを指定すると青色になるように設定しました。

App.css

.title { color: red; }
.title.is-blue { color: blue; }

新しくStateを設定して、classNameの部分を切り替えます。
「`」（バッククオート）を使うと、「${}」で囲むだけで式や変数を表示できるのでシンプルに書けます。

import React, { useState } from 'react'
import './App.css'
 
const App: React.FC = () => {    
	const [blue, setBlue] = useState(false)
	return (
		<div>
			<h1
				className={`
					title
					${ blue ? 'is-blue' : ''}
				`}
				onClick={() => setBlue(!blue)}
			>React.js スタイル設定</h1>
		</div>
	)
}
export default App

Components Styled で設定する方法

最後に Components Styled というライブラリを使用したスタイルの設定方法をご紹介します。
Components Styled はGitHubで（2019年12月）現在27kスターという結構メジャーなライブラリです。
このライブラリを使うとスタイル専用のコンポーネントを作成して、スタイルを設定することになり今までとは少し違った組み方が必要になります。
実際使ってみたほうが早いので、簡単なサンプルを作ってみましょう。

npmでライブラリをインストールします。

$ npm install --save styled-components

ここではバージョン4.4.1を使用します。

TypeScriptの場合は型定義もインストールしましょう。

$ npm install --save-dev @types/styled-components

スタイルの設定は「styled.タグ名」でタグ名を指定します。
その次に「`」で囲み通常のスタイルと同じように記述します。
例えば、h1タグの文字を赤にしたい場合は次のようになります。

const Title = styled.h1`
	color: red;
`

これでTitleコンポーネントとして使用することができます。

<div>
	<Title>React スタイル設定</Title>
</div>

Propsの設定

次に「blue」というPropsで文字色を青に変更できるようにしてみましょう。
styled-components の cssをインポートして、Propsのtypeを設定します。

import styled, { css } from 'styled-components'
 
type TitleProps = {
	blue?: boolean
}

三項演算子でblueが指定されたときに青色になるように設定するには下記のようになります。

const Title = styled.h1<TitleProps>`
    color: red;
 
    ${({blue}) => blue ? css`
        color: blue;
    ` : ''}
`

これでJSXでTitleコンポーネントでPropsを指定できるようになりました。

<div>
	<Title blue>React スタイル設定</Title>
</div>

最後にクラスの切り替えと同じように、Propsをクリックイベントで切り替えるように設定してみます。

import React, { useState } from 'react'
import styled, { css } from 'styled-components'
import './App.css'
 
type TitleProps = {
	blue?: boolean
}
 
const Title = styled.h1<TitleProps>`
	color: red;
 
	${({blue}) => blue ? css`
		color: blue;
	` : ''}
`
 
const App: React.FC = () => {
	
	const [blue, setBlue] = useState(false)
 
	return (
		<div className="App">
			<Title
			blue={blue}
			onClick={() => setBlue(!blue)}
			>React スタイル設定</Title>
		</div>
	);
}
export default App;

この記事の動画（Youtube）版はこちら！