Wie Sie mehrere Klassen in Material-UI über die Klassen Requisiten

Mithilfe der css-js-Methode zum hinzufügen von Klassen zum einen reagieren Komponente, wie füge ich mehrere Komponenten?

Hier wird die Klassen-variable:

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

Hier ist, wie ich es benutzt habe:

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

Den oben genannten Werken, aber es ist ein Weg, um beide Klassen, ohne die classNames npm-Paket? So etwas wie:

     <div className={ this.props.classes.container + this.props.classes.spacious}>
Vielleicht bin ich etwas fehlt, aber könnt Ihr nicht einfach tun <div className="container geräumige"> Warum muss man es als eine Eigenschaft?
du bist nur fehlt ein Leerzeichen zwischen zwei Klassennamen.
Ja, wie oben angegeben, die Sie gerade brauchen, um concat die Klassen richtig zusammen mit einem Leerzeichen dazwischen! Keine Notwendigkeit für irgendwelche zusätzlichen Pakete.

InformationsquelleAutor fatahn | 2017-09-06

  1. 5

    Wenn Sie möchten, die Zuweisung mehrerer Klassen Namen, um Ihr element, können Sie arrays.

    Also in deinem code oben, wenn diese.Requisiten.Klassen wird zu so etwas wie ['container', 'geräumig'], D. H. wenn 

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

    können Sie einfach zuweisen div als

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

    und Ergebnis

    <div class='container spacious'></div>
    sind Sie sicher, dass Klassen, die mit Namen, getrennt durch , im Ergebnis
    material-UI nicht wie das funktioniert
    Nicht sicher, warum dies ist die akzeptierte Antwort, @Glauber Ramos ist rechts -, Material-UI nicht wie das funktioniert.

    InformationsquelleAutor Praym

  2. 43

    können Sie die Verwendung von string-interpolation:

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

    InformationsquelleAutor klugjo

  3. 15

    können Sie dieses Paket installieren

    https://github.com/JedWatson/classnames

    und dann verwenden Sie es wie diese

    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'
    Dies ist der Ansatz der Material-UI verwendet in einigen Ihrer Beispiele, und funktioniert gut, so würde ich dieses empfehlen.
    Dies sollte die akzeptierte Antwort. Funktioniert wie erwartet

    InformationsquelleAutor Mini

  4. 4

    Können Sie auch die erweiterte Eigenschaft (die jss-plugin erweitern ist standardmäßig aktiviert):

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

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

    InformationsquelleAutor VaclavSir

  5. 2

    Ja, jss-komponiert liefert Ihnen diese:

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

    Dann verwenden Sie einfach Klassen.geräumige.

    InformationsquelleAutor Oleg Isonen

  6. 2

    Ich denke, das wird dein problem lösen:

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

    und reagieren Komponente: 

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

    InformationsquelleAutor Kalim M Vazir

Schreibe einen Kommentar