如何在反应组件上添加多个类名

Oza*_*Oza 4 css reactjs webpack babeljs

我正在使用 creat-react-app 的 webpack 设置,它使用 babel 来创建唯一的 css 类名。如果组件 A 中有子组件 B,并且 B 返回:

<div className={styles.B1} />
Run Code Online (Sandbox Code Playgroud)

和 A 返回:

<div>
    <B className={styles.B2}/>
</div>
Run Code Online (Sandbox Code Playgroud)

我想把两个类名都放在 B1、B2 上,但只有 B1 有效。

小智 6

组件 B 中的两个类名都像这样

<div className={ `${styles.B1} ${styles.B2}` } />
Run Code Online (Sandbox Code Playgroud)

应该管用。

或者,如果您想从组件 A 的 props 中传递 className,则

<div className={ `${styles.B2} ${this.props.className}` } />
Run Code Online (Sandbox Code Playgroud)