React環境におけるCSS Modulesでの指定の仕方まとめ

React環境におけるCSS Modulesでの指定の仕方まとめ

VueとReactで書き方がだいぶ違ったのでメモ…

module内で複数のクラスを指定

<div className={`${styles.bar} ${styles.hoge}`}>
</div>

module以外のcssクラスと併用

<div class={`mx-2 ${styles.bar}`}></div>

module内でクラス名にハイフンを指定している場合

<div className={styles['bar-hoge']}></div>

動的にclassをだし分ける

const [isShow, setIsShow] = useState(true)
 
<main className={`main ${isShow && 'bar'}`}>
<main className={`main ${isShow ? 'bar' : ''} `}>