How to add multiple classes in Material UI using the classes props?

Using the css-in-js method to add classes to a react component, how do I add multiple components?

Here is the classes variable:

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap'
  },
  spacious: {
    padding: 10
  },
});

Here is how I used it:

return (<div className={ this.props.classes.container }>)

The above works, but is there a way to add both classes, without using the classNames npm package? Something like:

<div className={ this.props.classes.container + this.props.classes.spacious}>

you can use string interpolation:

<div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>

You could use clsx. I noticed it used in the MUI buttons examples

First install it:

npm install --save clsx

Then import it in your component file:

import clsx from 'clsx';

Then use the imported function in your component:

<div className={ clsx(classes.container, classes.spacious)}>

you can install this package

https://github.com/JedWatson/classnames

and then use it like this

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'