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

2022 1/02

2022.01.02

想定読者

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

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

おにちゃん

執筆者：React利用歴半年ほどの僕が備忘録として執筆しています。

本記事のまとめ

React×CSSを使う場合は、CSS moudulesとmaterial-ui(framework)がおすすめです。
おにちゃん塾では上記2つを活用しています。

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

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

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

Pure CSS
インラインCSS
CSS Modules
CSS in JS
CSS Framework

Pure CSS

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

メリット：僕の肌感覚ですが、ない気がします
Pure CSSを使うのであれば、Reactで使えるCSS Modulesの方が良いです。

おにちゃん

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を使うと簡単にスタイリングできるのですが、下記の問題点があります。

CSSがグローバル管理になるため、保守管理が難しい
BEM設計などを採用するしかないので、クラス名が助長的になる

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に導入できる(これが便利)
create-react-appで導入されているので初心者でも扱いやすい

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

CSS in JS

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

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

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

CSS in JSの代表格

Styled Components
emotion

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のスター数、評判を加味して評価しています。

ReactでおすすめのCSS Framework

material-ui→mui
react-toolbox
react-bootstrap

CSS Framework：material-ui

おにちゃん塾ではmaterial-uiをメインのCSS Frameworkとして活用しています。

おにちゃん

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

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

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

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

適用させる手順

CSSファイルを作成
CSSファイルを読み込む
ローカルスコープを確認する

おにちゃん

3分ほどで理解できるはずです。

手順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をローカルスコープすることができるのです。