Reactでcssを使う

Reactでスタイリングする際の方法の一つであるcss moduleについての解説です。

【css moduleの組み込み方】

css moduleを組み込むには[name].cssというファイルから[name].module.cssとファイル名を変えることでcss module化がされます。

※sassを用いてスタイルシートを作成した際にこれをmodule化するには[name].module.sassまたは[name].module.scssと変更します。

【css moduleの記述方法】

style.module.css

.title {
　　background-color: green;
}

このファイルをimportで読み込みます。

index.tsx

import React from 'react';
import Style from './style.module.css';

class CssModule extends React.Component  {
　　render() {
　　　　return (
　　　　　　　<div className={Style["title"]}>
　　　　　　　　 <h1> Reactでcssを読み込む </h1>
　　　　　　　</div>
　　　　)
　　}
}

以上のようにrender内のclassName属性に{インポート名[“クラス名”]}と記述します。

【複数のクラスを指定する方法】

<div className="style1 style2"></div>

という複数のクラスが指定されているときに上記のように

<div className={Style["style1"] Style["style2"]}></div>

としてもcssが適用されず、デザインが崩れてしまいます。したがって、複数のクラスが指定されている場合、テンプレートリテラルのように記述します。

<div className={`${Style["style1"]} ${Style["style2"]`}></div>

【レンダリングの結果】

ブラウザ上で実際にクラス名を見てみると

<div className="index_title_ax7yz">
　　　<h1> Reactでcssを読み込む </h1>
</div>

のように[filename]_[classname]_[hash]と自動的に名称が割り当てられます。すなわち、cssを読み込んだコンポーネントでのみ、そのクラス名は割り当てられるのです。