Comment ajouter plusieurs classes dans Material UI à l'aide des accessoires de classes

À l'aide de la méthode css-in-js pour ajouter des classes à un composant react, comment ajouter plusieurs composants?

Voici la variable classes:

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

Voici comment je l'ai utilisé:

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

Ce qui précède fonctionne, mais existe-t-il un moyen d'ajouter les deux classes sans utiliser le classNamespackage npm? Quelque chose comme:

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

vous pouvez utiliser l'interpolation de chaîne:

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

vous pouvez installer ce package

https://github.com/JedWatson/classnames

puis utilisez-le comme ça

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'

Vous pouvez utiliser clsx . Je l'ai remarqué utilisé dans les exemples de boutons MUI

Installez-le d'abord:

npm install --save clsx

Puis importez-le dans votre fichier de composant:

import clsx from 'clsx';

Ensuite, utilisez la fonction importée dans votre composant:

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

Pour appliquer plusieurs classes à un composant, encapsulez les classes que vous souhaitez appliquer dans classNames.

Par exemple, dans votre situation, votre code devrait ressembler à ceci,

import classNames from 'classnames';

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

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

Assurez-vous d'importer classNames !!!

Jetez un œil à la documentation de l'interface utilisateur matérielle où ils utilisent plusieurs classes dans un composant pour créer un bouton personnalisé

Vous pouvez également utiliser la propriété extend (le plugin jss-extend est activé par défaut):

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

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

Je pense que cela résoudra votre problème:

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

et dans le composant de réaction:

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

Oui, jss-composes vous fournit ceci:

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

Et puis vous utilisez simplement classes.spacious.

classNames package peut également être utilisé aussi avancé que:

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'

Vous pouvez ajouter plusieurs classes de chaînes et classes variables ou classes d'accessoires en même temps de cette manière

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

trois cours en même temps

Si vous souhaitez attribuer plusieurs noms de classe à votre élément, vous pouvez utiliser des tableaux .

Donc, dans votre code ci-dessus, si this.props.classes se résout en quelque chose comme ['container', 'spacieux'], c'est-à-dire si

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

vous pouvez simplement l'assigner à div comme

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

et le résultat sera

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

Comme déjà mentionné, vous pouvez utiliser l'interpolation de chaîne

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

Et vous pouvez essayer la classnamesbibliothèque, https://www.npmjs.com/package/classnames