Zenn
🖥

Next.js ( React ) でCSS Moduleを使うシンプルなコード例

に公開
tech

コード

  • CSS のパスを指定して import する
  • ExampleCssModule というようなクラス名をつけて ExampleCssModule.example のような形でプロパティを呼び出す

pages/cssmodule.tsx

import ExampleCssModule from "../styles/ExampleCssModule.module.css";

export default function ExampleCss() {

  return (
    <div className={ExampleCssModule.example}>
      Text
    </div>
  );
}

styles/ExampleCssModule.module.css

.example{font-size:200pt}

表示例

<img width="684" alt="image" src="https://user-images.githubusercontent.com/13635059/210168638-d4db1f6e-561e-40cc-bcd8-30b2a8c351a0.png">

環境

next@13.1.1

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-01-01

Discussion