react style multiple classes code example

Example 1: give multiple classes in modular css react

className={`${styles.description} ${styles.yellow}`}

Example 2: how to add multiple style attributes in react element

style is just an Object, with css value turn to camelCase, so you could use any way to merge two object, and it should work.

ES6: style={Object.assign({}, style1, style2)}

ES7: style={{...style1, ...style2}}

lodash: style={_.merge({}, style1, style2)}

Example 3: jsx classname multiple

// Using String Templates
<div className={`${this.state.className} ${this.props.content.divClassName}}`>
	...
</div>
// OR
// Using An Array
<div className={[this.state.className, this.props.content.divClassName].join(" ")}>
	...
</div>

Example 4: How to add multiple classes to a ReactJS Component

var liClasses = classNames({
      'main-class': true,
      'activeClass': self.state.focused === index
    });

    return (<li className={liClasses}>{data.name}</li>);