Hinzufügen mehrerer Klassen in der Material-Benutzeroberfläche mithilfe der Klassenrequisiten

Wie füge ich mithilfe der css-in-js-Methode Klassen zu einer Reaktionskomponente hinzu?

Hier ist die Klassenvariable:

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

So habe ich es benutzt:

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

Das Obige funktioniert, aber gibt es eine Möglichkeit, beide Klassen hinzuzufügen, ohne das classNamesnpm-Paket zu verwenden? Etwas wie:

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

Sie können die Zeichenfolgeninterpolation verwenden:

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

Sie können dieses Paket installieren

https://github.com/JedWatson/classnames

und dann benutze es so

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'

Sie könnten clsx verwenden . Ich habe festgestellt, dass es in den Beispielen für MUI-Schaltflächen verwendet wird

Installieren Sie es zuerst:

npm install --save clsx

Importieren Sie es dann in Ihre Komponentendatei:

import clsx from 'clsx';

Verwenden Sie dann die importierte Funktion in Ihrer Komponente:

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

Um mehrere Klassen auf eine Komponente anzuwenden, schließen Sie die Klassen, die Sie anwenden möchten, in classNames ein.

In Ihrer Situation sollte Ihr Code beispielsweise so aussehen:

import classNames from 'classnames';

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

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

Stellen Sie sicher, dass Sie classNames importieren !!!

Schauen Sie sich die Dokumentation zur Material-Benutzeroberfläche an, in der mehrere Klassen in einer Komponente verwendet werden, um eine benutzerdefinierte Schaltfläche zu erstellen

Sie können auch die Extend-Eigenschaft verwenden (das JSS-Extend-Plugin ist standardmäßig aktiviert):

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

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

Ich denke, das wird Ihr Problem lösen:

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

und in Reaktionskomponente:

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

Ja, jss-composes bietet Ihnen Folgendes:

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

Und dann benutzt du einfach Klassen.

classNames Paket kann auch so fortgeschritten verwendet werden wie:

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'

Auf diese Weise können Sie mehrere Zeichenfolgenklassen und Variablenklassen oder Requisitenklassen gleichzeitig hinzufügen

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

drei Klassen gleichzeitig

Wenn Sie Ihrem Element mehrere Klassennamen zuweisen möchten , können Sie Arrays verwenden .

Wenn this.props.classes in Ihrem obigen Code in etwas wie ['container', 'spacious'] aufgelöst wird, dh if

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

Sie können es einfach div als zuweisen

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

und Ergebnis wird sein

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

Wie bereits erwähnt, können Sie die Zeichenfolgeninterpolation verwenden

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

Sie können auch die classnamesBibliothek https://www.npmjs.com/package/classnames ausprobieren