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 => ({
  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}>

Maybe I'm missing something, but can't you just do
Why do you need to pass it as a property? — Leo Farmer, Sep 06 '17 at 04:17
Yeah as stated above, you just need to concat the classes together correctly with a space in between! No need for any additional packages. — Taylor A. Leach, Jan 08 '19 at 22:45

score 291 · Accepted Answer · edited Sep 06 '17 at 05:28

291

you can use string interpolation:

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

edited Sep 06 '17 at 05:28

Pardeep Jain

84,110
37
165
215

answered Sep 06 '17 at 04:17

klugjo

19,422
8
57
75

14

and remember not to add commas in between classes! I did by mistake and the first one broke silently without noticing for a while – Pere Nov 27 '19 at 12:04
1

And there must be a space between the classes – Yoel Nov 05 '20 at 18:35
2

This is the first time I've encountered a scenario where string interpolation is actually more tedious to write than doing it the old fashioned way: `className={classes.container+' '+classes.spacious}` – TJBlackman Feb 01 '21 at 04:28
1

@TJBlackman indeed, your version is more readable – Michael Apr 02 '21 at 02:45
Or even `
`
– Fappaz Oct 04 '21 at 01:23

score 79 · Answer 2 · answered Jul 24 '19 at 01:03

79

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

answered Jul 24 '19 at 01:03

Razzlero

1,143
8
9

6

`clsx` package is smaller than `classnames`, so I prefer this solution – 0xh8h Apr 06 '20 at 10:33
5

clsx is included in Material UI, so its more preferred than classnames – DBrown Apr 29 '20 at 23:52
2

Per Wayne Bloss' comment below Mini's less-optimal answer: `@material-ui/core now depends on clsx, so if you don't want to increase your bundle size you'll want to use that instead`. So, +1 for this answer. – cssyphus Aug 06 '20 at 16:52
2

It seems `clsx` is not included in the latest `@mui/*` packages – loopmode Dec 01 '21 at 19:39
It's still a dependency, and referenced [in the MUI docs](https://mui.com/material-ui/getting-started/faq/#whats-the-clsx-dependency-for). I haven't installed it manually, but it works as expected. – Nick K9 Dec 21 '22 at 14:57

score 49 · Answer 3 · answered Sep 06 '17 at 05:41

49

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'

answered Sep 06 '17 at 05:41

Mini

1,138
9
24

3

This is the approach Material-UI uses in some of their examples, and works well so I'd recommend this. – Craig Myles Sep 05 '18 at 07:28
2

This should be the accepted answer. Works as expected – Howie Dec 27 '18 at 17:19
2

Been using this approach as well. Useful not just for having multiple classnames but also for making it conditional. – mouthzipper Feb 04 '19 at 10:32
7

`@material-ui/core` now depends on `clsx`, so if you don't want to increase your bundle size you'll want to use that instead - https://www.npmjs.com/package/clsx – Wayne Bloss Oct 04 '19 at 16:21

score 23 · Answer 4 · edited Feb 11 '19 at 00:36

To have multiple classes applied to a component, wrap the classes you would like to apply within classNames.

For example, in your situation, your code should look like this,

import classNames from 'classnames';

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

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

Make sure that you import classNames!!!

Have a look at material ui documentation where they use multiple classes in one component to create a customized button

score 12 · Answer 5 · answered Feb 09 '18 at 15:25

12

You can also use the extend property (the jss-extend plugin is enabled by default):

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

// ...
<div className={ this.props.classes.spaciousContainer }>

answered Feb 09 '18 at 15:25

VaclavSir

595
1
4
9

2

Unfortunately, not enabled by default anymore... vote to enable [here](https://github.com/mui-org/material-ui/issues/9342#) – egerardus Apr 25 '19 at 02:53

score 10 · Answer 6 · answered Oct 22 '18 at 16:31

10

I think this will solve your problem:

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

and in react component:

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

answered Oct 22 '18 at 16:31

Kalim M Vazir

109
1
2

score 10 · Answer 7 · answered May 05 '20 at 07:59

10

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

answered May 05 '20 at 07:59

Muhammad Muzamil

1,013
2
18
25

score 6 · Answer 8 · answered Sep 06 '17 at 05:48

6

Yes, jss-composes provides you this:

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

And then you just use classes.spacious.

answered Sep 06 '17 at 05:48

Oleg Isonen

1,463
10
10

while using multiple classname using compose ,it does not work. https://codesandbox.io/s/practical-cohen-l6qt5?file=/src/text.js – user970780 Jul 30 '20 at 08:25

score 3 · Answer 9 · answered Feb 09 '20 at 22:31

3

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'

answered Feb 09 '20 at 22:31

Hasan Sefa Ozalp

6,353
5
34
45

show error webpack build : Module not found: Error: Can't resolve 'classnames' in – Pranay Soni Apr 28 '20 at 23:55

score 1 · Answer 10 · edited Apr 09 '21 at 20:54

1

You can use this method below:

import clsx from 'clsx';
    
return <div className={clsx(classes.container, 'spacious')} />

This link helps.

edited Apr 09 '21 at 20:54

adesurirey

2,549
2
16
36

answered Apr 07 '21 at 10:29

Muneeba Amjad

19
1

Ivan K. · Answer 11 · 2022-09-03T05:37:07.813

You can apply two classes in material UI like that

import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  spacious: {
    padding: 10,
  },
});

some code


 <div className={classNames(classes.container, classes.spacious)}>
      Try this one!
 </div>

How to add two classes using the comparison operator in Material UI.

If you want to use the comparison operator to define one or two classes, you need to apply


import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  maineButton: {
   borderRadius: "10px",
   minWidth: "80px",
   border: "1x solid #dcdcdc",
  },
  selectedButton: {
    border: "1x solid #3f51b5",
  },
});

some code

const [selected, setSelected] = useState(0);

some code

{data?.map((el, index) => (
   <ButtonBase 
     className={classNames(
        classes.maineButton, 
        index === selected && classes.selectedButton
        )}
     onClick{()=> setSelected(index)}
   >
     {el.text}
   </ButtonBase>
))}

if selected it will give you two classes

className={classNames(classes.maineButton, classes.selectedButton)}

if not, it will be only one

className={classNames(classes.maineButton)}

Praym · Answer 12 · 2017-09-06T05:49:51.777

-1

If you want to assign multiple class names to your element, you can use arrays.

So in your code above, if this.props.classes resolves to something like ['container', 'spacious'], i.e. if

this.props.classes = ['container', 'spacious'];

you can simply assign it to div as

<div className = { this.props.classes.join(' ') }></div>

and result will be

<div class='container spacious'></div>

edited Sep 06 '17 at 05:49

answered Sep 06 '17 at 05:06

Praym

2,038
23
21

are you sure classes named separated by `,` in result – Pardeep Jain Sep 06 '17 at 05:29
8

Not sure why this is the accepted answer, @Glauber Ramos is right, Material UI doesn't work like that. – timotgl Nov 16 '18 at 11:05

score -1 · Answer 13 · answered Jun 01 '21 at 12:30

It can be done painlessly with descructuring, after all, these are JavaScript objects:

const truncate = {
  width: '100px',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
};
email: {
    color: '#747474',
    ...truncate,
  },

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

13 Answers13

Linked