How to add multiple classNames on a react component

Question

I'm using creat-react-app's webpack settings, which uses babel to make a unique css classnames. If there's a child component B inside a component A, and B returns :

<div className={styles.B1} />

and A returns :

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

I want to put both classnames B1, B2, but only B1 works.

Answer 1

Both classNames inside component B like this

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

should work.

Or if you want to pass the className from props from component A, then

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