見出し画像

React学習キロク #002 CSS Modulesでスタイリング

おはる

React初学者の備忘録です。
温かく見守っていただけるとありがたいです。

早起きすると1日が長くなったような気がしてハッピーになれるので、毎日早起きしたいなと思っているのに、まず早寝ができません。
日々、早寝早起きは人生の課題だなと感じています。（根性がない）

今回は、CSS Modulesを使用したスタイリングについて学んだので、その記録を残しておきたいと思います。

学習内容

CSS Modulesを使ったスタイリングを学びました。
コンポーネントごとにスタイルを適用でき、クラス名がランダムに生成されるため、クラス名の重複を防ぎやすくなります。

CSS Modulesの使い方

①CSSファイルを作る（header.module.css）

.title {
  font-size: 24px;
  color: #333;
  line-height: 1.5;
}

②CSSを適用する（Header.tsx）

import styles from "./header.module.css"

function Header() {
  return(
    <h1 className={styles.title}>タイトル</h1>
  )
}

＊モジュール化されないグローバルなCSSを書きたい時

:global(.title) {
  font-size: 24px;
  color: #fff;
}

✍️メモ

ViteやNextは、CSS Modulesに対応しているので、特に設定は必要なし。
Webpackを使用する場合は設定が必要。

学習の感想

以前Next.jsを使用してポートフォリオを作成した時は、CSS Modulesを使用していたので、Tailwindよりもこちらの方が馴染みがありました。

globalの指定方法が分からずに苦戦した記憶があったのですが、こんなに簡単にできるとは…

モジュール化されたクラス名には、コンポーネント名も付与されるので、かなり探しやすく、メンテナンスもしやすいと感じました。

Next…

React Hooksを使ってデータを扱う方法を学びます💻
ついにuseEffectを使うらしい…！

いいなと思ったら応援しよう！