【2022年】React CSS FrameworkとCSS Modulesの使い方を紹介

想定読者

【2021年】ReactでCSSを活用する際、FrameworkとCSS Modulesのどちらが良いのか迷っている

上記の方向けに執筆しています。

本記事では、ReactでCSSを活用する方法、Reactで使える有名なCSS Framework、CSS Modulesの使い方について紹介しています。

ReactでCSSを適用させる方法を集めてみた

ReactでCSSを適用させる方法は大きく下記の方法があるみたいです。

Pure CSS

ReactでCSSを活用する方法ひとつ目は「Pure CSS」です。

Pure CSSが使えない理由を紹介します。

まずは、App.jsを書き換えます。

import './App.css';

function App() {
  return (
    <div>
      <p className="text">当サイト</p>
    </div>
  );
}

export default App;

class=textを追加したので、App.cssの方でスタイリングしてみましょう。

.text {
  color: red;
}

簡単に文字カラーを赤にするスタイリングをしてみました。この結果は下記の通りです。

エコおじい

こんな感じでPureCSSを使うと簡単にスタイリングできるのですが、下記の問題点があります。

Text.jsとText.cssファイルを追加して下記のコードを加えてみてください。またindex.jsも追加で変更します。

import './Text.css';

function Text(){
  return (
    <>
    <p className="text">当サイトB</p>
    </>
  );
}

export default Text;

.text {
  color: blue;
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Text from './Text';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
    <Text />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

エコおじい

このようなファイルに書き換えると、下記の画像のような問題にぶつかります。

このようにPure CSSを活用してしまうと、クラス名がバッティングした場合に大変なことになってしまいます。

そのため、個人的にはこのスタイリング方法は使えないと思っています。

インラインCSS

ReactでCSSを活用する方法ふたつ目は「インラインCSS」です。

インラインCSSとは、コンポーネントに直接CSSを書き込む方法です。

エコおじい

Reactが非推奨のスタイリング方法なのであまりおすすめしません。

function App() {
  return (
    <div>
      <p style={{ color: 'red'}}>当サイト</p>
    </div>
  );
}

export default App;

htmlの時と記述方法が違う点に注意してください。

CSS Modules

ReactでCSSを活用する方法みっつ目は「CSS Modules」です。

CSSを使い慣れている方であれば、この方法をおすすめします。

CSS Modulesがおすすめの理由

使い方に関しては最後の章で解説しています。気になる方はジャンプしましょう。

CSS in JS

ReactでCSSを活用する方法よっつ目は「CSS in JS」です。

CSS in JSは、CSSをJavaScriptで記述してみようと言った発想で作られています。

JSファイルに一括して記述できるので人気があるのですが、JSが非推奨のブラウザなどに直面するとレンダリングされない問題が発生しているみたいです。

CSS in JSの代表格

CSS Framework

ReactでCSSを活用する方法いつつ目は「CSS Framework」です。

有名なCSS FrameworkとしてBootstrapがありますが、そのような簡単にUIを構築することができるFrameworkがReactにも存在しています。

Frameworkがありすぎて、どれを選べば良いか分からないと言った方は下記の章を参考にしてみてください。

【2021年版】ReactでおすすめのCSS Framework

2021年版、ReactでおすすめのCSS Frameworkは「material ui→mui」だと思います。githubのスター数、評判を加味して評価しています。

CSS Framework：material-ui

当サイトではmaterial-uiをメインのCSS Frameworkとして活用しています。

導入方法、使い方、デザイン性のどれをとっても一級品なので、おすすめです。

導入方法を詳しく知りたい方は下記の記事を参考にしてみてください。

あわせて読みたい

【React + Material-UI入門】カッコいいデザインを秒速で作成 本記事では、Reactの環境構築が完了している方を対象としています。 Reactの準備が終わっていない方は下記の記事を参考にしてみてください。 2021年/4月29日執筆 記事は...

具体的に、使い方を知りたい方は【Material UI実践編】buttonコンポーネントでデザイン作成を参考にしてみてください。

ReactでCSS modulesを適用させる方法

ReactでCSS modulesを適用させる手順は下記の通りです。

適用させる手順

手順1：CSSファイルを作成する

create-react-appでReactファイルを作成している方はCSS modulesが自動的に使えるので、何もする必要はありません。

CSS modulesの使い方：ファイル名に.module.cssとつけるだけ

このように拡張子を変えるだけです。

手順2：CSSファイルを読み込む

先ほど作成した「App.module.css」を読み込みましょう。

import Apps from './App.module.css';

App.module.cssで記述してCSSをAppsとしてインポートしています。

classNameに展開する際は下記のようにします。

import Apps from './App.module.css';

function App() {
  return (
    <div>
      <p className={Apps.text}>当サイト</p>
    </div>
  );
}

export default App;

インポート名.スタイル名としてclassNameに記述します。

たったこれだけで、CSSをローカルスコープすることができます。

手順3：ローカルスコープを確認する

npm startをしてプロジェクトを起動させてみてください。

このように、適当なランダム数が自動で割り当てられるので、ローカルスコープすることができるのです。

Reactを有料動画で学ぶ

まとめ：ReactでCSSを使う場合は、自分の好きなものを活用しよう(正解はない気がします)

ここまでで「【2021年】React CSS FrameworkとCSS Modulesの使い方を紹介」の解説は以上です。

Reactで使えるCSSの次はReact hooksについて学んでみてください。

あわせて読みたい

【入門編】React hooksとは｜基礎知識を徹底解説【書籍付き】 本記事の想定読者 React hooksとは何なのかReact hooksの使い方を学習したいReact hooksの学習教材を知りたい 本記事は上記の方に向けて、執筆しています。 2021年5月18...