React.js

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' : ''} `}>
ABOUT ME
ytakeuchi
都内在住のフロントエンドエンジニア。2016年からフリーランスとして活動中。座右の銘は「昨日よりも楽に」。好きな言葉は「効率化」。こんな性格なのでプライベートではGoogle Apps Scriptばかり触っています。