CODEWITHSUNDEEP
reactjsreact-nativecss-modules
justsomeron
justsomeron

Reputation: 145

CSS Modules with React- using multiple classNames

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!

Upvotes: 4

Views: 5761

Answers (3)

Duane Martin
Duane Martin

Reputation: 61

className={`${Styles.inputData} ${"SubSection"}`}

using this simple formate should work

Upvotes: 0

nart
nart

Reputation: 1848

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(' ')} />

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

Upvotes: 3

Karishma Shukla
Karishma Shukla

Reputation: 181

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

Upvotes: 8

Related Questions