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>
</>
)
}
ご教授のほどよろしくお願いします。
0
