React環境におけるCSS Modulesでの指定の仕方まとめ
React.js
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' : ''} `}>