多个 React 组件类名答案

【问题标题】：Multiple React component className's多个 React 组件类名
【发布时间】：2022-06-26 08:27:46
【问题描述】：

我们有一个 React 项目，其中样式是这样编写的：

import styles from 'styles/sidebar.module.scss'
...
<div className={styles.sidebar}>Hello</div>

我不知道如何使用这种语法包含两个类，例如：

<div className={styles.sidebar}+{styles.scroll}>Hello</div>
<div className={styles.sidebar, styles.scroll}>Hello</div>
<div className={styles.sidebar}, {styles.scroll}>Hello</div>
<div className={styles.sidebar}{styles.scroll}>Hello</div>

以上方法均无效，我还能尝试什么？

【问题讨论】：

标签： reactjs react-css-modules

【解决方案1】：

就像这样，因为它们只是字符串：

<div className={`${styles.sidebar} ${styles.scroll}`}>Hello</div>

【讨论】：

【解决方案2】：

您可以使用template literal

<div className={`${styles.sidebar} ${styles.scroll}`}>Hello</div>

【讨论】：

【解决方案3】：

使用名为classnames 的实用程序库可能是一个好方法，特别是如果您需要应用一些条件来确定是否包含某些类名。这是一个例子；

var classNames = require('classnames');

class Button extends React.Component {
  // ...
  render () {
    var btnClass = classNames({
      'btn': true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
}

【讨论】：