
【2021年】ReactでCSSを活用する際、FrameworkとCSS Modulesのどちらが良いのか迷っている
上記の方向けに執筆しています。



執筆者:React利用歴半年ほどの僕が備忘録として執筆しています。
- React×CSSを使う場合は、CSS moudulesとmaterial-ui(framework)がおすすめです。
- おにちゃん塾では上記2つを活用しています。
本記事では、ReactでCSSを活用する方法、Reactで使える有名なCSS Framework、CSS Modulesの使い方について紹介しています。


- TechAcademy 無料体験
→色々なコースが充実しているので、迷っている方はこのスクールをおすすめします - 侍エンジニア塾 無料体験
→オンラインコミュニティがあるので、費用がない方におすすめ - chot.design
→月額1100円でWebデザイン系の基礎を学ぶことができる
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のスター数、評判を加味して評価しています。
- material-ui→mui
- react-toolbox
- react-bootstrap
CSS Framework:material-ui
おにちゃん塾ではmaterial-uiをメインのCSS Frameworkとして活用しています。



導入方法、使い方、デザイン性のどれをとっても一級品なので、おすすめです。
導入方法を詳しく知りたい方は下記の記事を参考にしてみてください。


具体的に、使い方を知りたい方は【Material UI実践編】buttonコンポーネントでデザイン作成を参考にしてみてください。
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をローカルスコープすることができるのです。
手順3:ローカルスコープを確認する
npm startをしてプロジェクトを起動させてみてください。


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



僕はこの方法を活用してReactにCSSを導入しています。
Reactを有料動画で学ぶ
まとめ:ReactでCSSを使う場合は、自分の好きなものを活用しよう(正解はない気がします)
ここまでで「【2021年】React CSS FrameworkとCSS Modulesの使い方を紹介」の解説は以上です。



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

