JAVASCRIPT

multiple css classes in react

//one class from props and second from custom css class
className={`${classes.container} custom_container`}

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)}

How To Use Multiple Styles in REACT

//Using multiple styling in React is slightly different from React Native.
//First you have to create the styling object variables and then you use spread operator to call the styles in  the element you wish to style
//Below is an example. And you can make the style variables be global. This works in class components too.

const Header = (props) => {
  let baseStyle = {
    color: 'red',
  }

  let enhancedStyle = {
    fontSize: '38px'
  }

  return(
    <h1 style={{...baseStyle, ...enhancedStyle}}>{props.title}</h1>
  );
}

//You can also use this  method to add inline style, eg:
 containerStyle={{
            ...sharedStyles,
            backgroundImage: `url(${background1})`
          }}

apply multiple style objects in react js

// REACT JS STYLING - Snippet 1

//--- Use belowe methods ---
ES6: style={Object.assign({}, style1, style2)}
ES7: style={{...style1, ...style2}}