Css 如何在react组件上添加多个类名

我正在使用CreatReact应用程序的webpack设置，它使用babel创建一个独特的css类名。 如果组件a中有子组件B， 和B返回：

<div className={styles.B1} />

<div>
    <B className={styles.B2}/>
</div>

和A返回：

<div className={styles.B1} />

<div>
    <B className={styles.B2}/>
</div>

---

我想把两个类名都放在B1和B2中，但只有B1起作用。

在Component

A

中，以

className

的形式传入所需的类

const styles = {
  B1: "styleClassB1",
  B2: "styleClassB2",        
}

// inside return
<div>
  <B className={`${styles.B2} ${styles.B1}`}/>
</div>

---

组件B中的两个类名如下

<div className={ `${styles.B1} ${styles.B2}` } />

应该有用

或者，如果您想从组件A的props传递类名，那么

<div className={ `${styles.B2} ${this.props.className}` } />

---

或者，您可以使用名为classnames的npm包