Cómo agregar múltiples clases en Material UI usando los accesorios de clases

Usando el método css-in-js para agregar clases a un componente de reacción, ¿cómo agrego varios componentes?

Aquí está la variable de clases:

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

Así es como lo usé:

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

Lo anterior funciona, pero ¿hay alguna manera de agregar ambas clases sin usar el classNamespaquete npm? Algo como:

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

puede utilizar la interpolación de cadenas:

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

puedes instalar este paquete

https://github.com/JedWatson/classnames

y luego úsalo así

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'

Podrías usar clsx . Noté que se usa en los ejemplos de botones MUI

Primero instálalo:

npm install --save clsx

Luego impórtelo en su archivo de componente:

import clsx from 'clsx';

Luego use la función importada en su componente:

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

Para tener varias clases aplicadas a un componente, envuelva las clases que le gustaría aplicar dentro de classNames.

Por ejemplo, en su situación, su código debería verse así,

import classNames from 'classnames';

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

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

¡Asegúrate de importar classNames!

Eche un vistazo a la documentación de la interfaz de usuario de material donde usan múltiples clases en un componente para crear un botón personalizado

También puede usar la propiedad extend (el complemento jss-extend está habilitado de forma predeterminada):

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

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

Creo que esto resolverá tu problema:

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

y en el componente de reacción:

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

Sí, jss-composes le proporciona esto:

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

Y luego solo usa classes.spacious.

classNames El paquete también se puede utilizar tan avanzado como:

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'

Puede agregar varias clases de cadenas y clases de variables o clases de accesorios al mismo tiempo de esta manera

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

tres clases al mismo tiempo

Si desea asignar varios nombres de clase a su elemento, puede usar matrices .

Entonces, en su código anterior, si this.props.classes se resuelve en algo como ['contenedor', 'espacioso'], es decir, si

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

simplemente puede asignarlo a div como

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

y el resultado será

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

Como ya se mencionó, puede usar la interpolación de cadenas

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

Y puede probar la classnamesbiblioteca, https://www.npmjs.com/package/classnames