CSS Modules with React- using multiple classNames

Issue

I'm new to CSS Modules and React.

import React, { useState } from "react"
import styles from "./Counter.module.css"

function Counter() {
    const [count, setCount] = useState(0)

    const increase = () => {
        setCount(count + 1)
    }

    const decrease = () => {
        setCount(count - 1)
    }
    return (
        <div>
            <h2>This is a counter</h2>
            <p>Current number: {count}</p>
            <button className={styles.button__increase} onClick={increase}>+++</button>
            <button className={styles.button__decrease} onClick={decrease}>---</button>
        </div>
    )
}

export default Counter

I added the class {styles.button__decrease}. How can I now add another class to this className when using CSS Moduls? I have the class ".button" and ".button--decrease" in my CSS-file but I'm not sure how to apply more than one.

Thank you in advance!

Solution

className={`${styles.button} ${styles.button__decrease}`} should do the job!

Answered By - Karishma Shukla