web-dev-qa-db-fra.com

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 de réaction, comment puis-je 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 package classNames npm? Quelque chose comme:

     <div className={ this.props.classes.container + this.props.classes.spacious}>
cssreactjsmaterial-designmaterial-uijss
42
fatahn

vous pouvez utiliser l'interpolation de chaîne:

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

vous pouvez installer ce paquet

https://github.com/JedWatson/classnames

et ensuite l'utiliser 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'
35
Mini

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 !!!

Regardez documentation matérielle de l'interface utilisateur où ils utilisent plusieurs classes dans un composant pour créer un bouton personnalisé

11
will92

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

Oui, jss-compose vous fournit ceci:

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

Et puis vous utilisez simplement classes.spacious.

5
Oleg Isonen

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}`}>
5
Kalim M Vazir

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

Tout d'abord l'installer:

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

1
Razzlero

Si vous voulez affecter plusieurs classes noms à votre élément, vous pouvez tiliser des tableaux.

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

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

vous pouvez simplement l'assigner à div en

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

et le résultat sera

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