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

コード

• 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}

表示例

環境

next@13.1.1

チャットメンバー募集

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

Twitter