CSS 带有 React 的模块 - 使用多个类名

Question

我是 CSS 模块和 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

我添加了 class {styles.button__decrease}。我现在如何在使用 CSS 模块时向此 class 名称添加另一个 class？我的 CSS 文件中有 class“.button”和“.button--decrease”，但我不确定如何应用多个。

提前致谢！

Answer 1

className={`${styles.button} ${styles.button__decrease}`} 应该能胜任！

Answer 2

您可以使用包名 classnames

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

或手动

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

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

CSS 带有 React 的模块 - 使用多个类名

CSS Modules with React- using multiple classNames

reactjs

react-native

css-modules