多个反应组件类名

Question

我们有一个 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>

以上方法均无效，不确定还可以尝试什么。非常感谢任何帮助！

Answer 1

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

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

Answer 2

您可以使用template literal

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

Answer 3

使用名为 classnames 的实用程序库可能是一个不错的方法，尤其是当您需要对是否包含某些 class 名称应用某些条件时。这是一个例子；

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>;
  }
}

多个反应组件类名

Multiple react component className's

reactjs

react-css-modules