😽

[React]　CSS Modulesで複数のクラスを指定する方法

2021/03/28に公開1件

CSS

JavaScript

React

tech

はじめに

CSS Modulesで複数クラスの指定の仕方がわからなかったのでメモする

テンプレートリテラルで記述する

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

bootstrapなど併用する時

<div class={`col-lg-6 ${styles.aboutBoxImg} wow fadeInUp`}></div>

Discussion

nap5

tailwindcssと併用するときのデモを少しデモを作ってみました。

import styles from './styles.module.scss'

const Home = () => {
  return (
    <main className={`bg-slate-200 ${styles.some}`}>
      <h2>Cowboy in LA</h2>
      <ul>
        <li className={`${styles.nice}`}>Spike</li>
        <li>Fei</li>
        <li className={`${styles.nice}`}>Edo</li>
        <li>Jet</li>
      </ul>
    </main>
  )
}

export default Home

demo code.

demo site.
https://400j5x-42649.csb.app/

簡単ですが、以上です。