How to add multiple classes to the materials user interface using class details

Question

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

Here is the class 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}> 

Answer 1

you can use string interpolation:

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

Answer 2

You can install this package

https://github.com/JedWatson/classnames

and then use it like that

 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' 

Answer 3

To apply multiple classes to a component, wrap the classes you want to apply in 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 you import classNames !!!

Check out the user interface documentation in which they use multiple classes in the same component to create a custom button.

Answer 4

You can also use the extend property ( 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 }> 

Answer 5

I think this will solve your problem:

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

and in the reactive component:

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

Answer 6

Yes, jss-composes provides you with the following:

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

And then you just use classes.spacious.

Answer 7

If you want to assign you several class names , you can use arrays .

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

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

you can just assign its div as

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

and the result will be

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

Answer 8

You could use clsx . I noticed that this is used in examples of MUI buttons

Install it first:

npm install --save clsx

Then import it into the component file:

import clsx from 'clsx';

Then use the imported function in your component:

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