How to add multiple classNames on a react component

user_9546857 0
Viewed 11083

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.

babeljs webpack reactjs css
2 Answers

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}` } />
user_44745210

In Component A, pass in the required classes as className

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

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

In Component B, use the passed-in className prop

<div className={this.props.className} />
user_73622030
Related