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

Question

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          


        

Answer 1

You can add multiple string classes and variable classes or props classes at same time in this way

className={`${classes.myClass}  ${this.props.classes.myClass2} MyStringClass`}

three classes at same time

Answer 2

you can use string interpolation:

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

Answer 3

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

Answer 4

As already mentioned, you can use string interpolation

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

And you can try classnames library, https://www.npmjs.com/package/classnames

Answer 5

classNames package can also be used as advanced as:

import classNames from 'classnames';

var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true }); // => 'btn-primary'