[Q&A] CSS Modulesの適用について

CSS Modulesの適用について

CSS Modulesの適用についてご教授をお願いします。

ReactでWebサイトを作成しようとしています。
CSSは、CSS Modulesを適用しようとしているのですがうまく反映させられません。

style.module.cssの内容

style.module.css

.wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 16px;
}

header {
    width: 100%;
    position: fixed;
    z-index: 100;
    background-color: white;
}

header h2 {
    padding: 15px;
    font-size: 30px;
    padding-left: 20px;
    font-weight: 400;
}

style.module.cssの内容のうち下記のHeader.jsxのdivに「classes.wrapper」と「classes.header」を適用させたいのですが、エラーとなります。「classes.wrapper」だけを適用させようとすると反映します。
CSS Modulesのルールとして2個以上のセレクタを適用させられないのでしょうか。

Header.jsx

import React from 'react'
import classes from "./css/style.module.css"

export const Header = () => {
    return (
        <>
            <div className={classes.wrapper classes.header}>
                <h2>
                    ブログ
                </h2>
                <nav>
                    <ul>
                        <li><a href="#">カテゴリ</a></li>
                        <li><a href="#">カテゴリ</a></li>
                    </ul>
                </nav>
            </div>
        </>
    )
}

ご教授のほどよろしくお願いします。

1Answer

@Verclene posted at 2023-10-24

とりあえずCSS Moduleを使うには基本的にクラスセレクタである必要があります.ネストも一応できますが,個人的には影響範囲が大きくなるのであんまり推奨しないです.

.wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 16px;
}

.header {
    width: 100%;
    position: fixed;
    z-index: 100;
    background-color: white;
}

.header h2 {
    padding: 15px;
    font-size: 30px;
    padding-left: 20px;
    font-weight: 400;
}

あとこのままではclassNameに渡す式として成立しないので,複数指定するなら1つの文字列にまとめる必要があります.

-<div className={classes.wrapper classes.header}>
+<div className={`${classes.wrapper} ${classes.header}`}>

2Like

Comments

@gallantsummerwind
Questioner
文字列を1つにすることで解消されました。クラスセレクタについても勉強してみます。
ありがとうございました！

CSS Modulesの適用について

style.module.cssの内容

1Answer

Comments

Your answer might help someone💌

Popular Questions