CSS Modules with React- using multiple classNames-CodePudding

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!

CodePudding user response：

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

CodePudding user response：

You can using package name classnames

import classNames from 'classnames'
<button className={classNames(style.button, style.button__decrease)} />

or manually

<button className={[style.button, style.button__decrease].join(' ')} />

function classnames(...classes) {
  return classes.join(' ')
}
<button className={classnames(style.button, style.button__decrease)} />