Nextでmodule.scssで設定したclassNameを複数設定する方法

Nextでmodule.scssで設定したclassNameを複数設定する方法

Next.jsでTypeScriptとCSSモジュールを使用して、module.scssで設定した複数のclassNameを組み合わせる方法について説明します。
ここでは、classnamesライブラリを使うと便利です。

1. ライブラリのインストール（必要な場合）

npm

npm install classnames

yarn

yarn add classnames

2. module.scss ファイルの作成

まず、CSSモジュールファイルを作成します。
たとえば、styles.module.scssという名前にします。

/* styles.module.scss */
.container {
  padding: 20px;
  background-color: #f0f0f0;
}

.primary {
  color: blue;
}

.secondary {
  color: green;
}

3. TypeScriptファイルの作成

次に、TypeScriptファイルで複数のクラスを設定する方法を示します。
たとえば、MyComponent.tsxという名前にします。

// MyComponent.tsx
import React from 'react';
import classNames from 'classnames';
import styles from './styles.module.scss';

const MyComponent: React.FC = () => {
  return (
    <div className={classNames(styles.container, styles.primary)}>
      複数のクラスが適用されます。
    </div>
  );
}

export default MyComponent;

4. 使用方法

次に、このコンポーネントを使用します。
たとえば、pages/index.tsxにインポートして使用します。

// pages/index.tsx
import React from 'react';
import MyComponent from '../components/MyComponent';

const HomePage: React.FC = () => {
  return (
    <div>
      <h1>ホームページ</h1>
      <MyComponent />
    </div>
  );
}

export default HomePage;

解説

classnamesライブラリを使うことで、複数のクラスを簡単に結合できます。
styles.module.scssは、CSSモジュールを使ってスコープ化されたスタイルを作成します。
classNames(styles.container, styles.primary)は、containerとprimaryクラスを結合して、div要素に適用します。

この方法で、Next.jsとTypeScriptを使用して複数のクラスを簡単に設定できます。

classnamesライブラリを使用しない方法

classnamesライブラリを使用せずに複数のclassNameを設定する方法もあります。
JavaScriptの文字列結合を使用してクラス名を結合することができます。
以下にその方法を示します。

// MyComponent.tsx
import React from 'react';
import styles from './styles.module.scss';

const MyComponent: React.FC = () => {
  return (
    <div className={${styles.container} ${styles.primary}}>
      複数のクラスが適用されます。
    </div>
  );
}

export default MyComponent;

解説

${styles.container} ${styles.primary}のようにテンプレートリテラルを使うことで、複数のクラスを簡単に結合できます。
styles.module.scssは、CSSモジュールを使ってスコープ化されたスタイルを作成します。

この方法で、classnamesライブラリを使用せずにNext.jsとTypeScriptで複数のクラスを簡単に設定できます。