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