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 classNames
npm-Paket zu verwenden? Etwas wie:
<div className={ this.props.classes.container + this.props.classes.spacious}>
Antworten:
Sie können die Zeichenfolgeninterpolation verwenden:
<div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>
quelle
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'
quelle
@material-ui/core
hängt jetzt davon abclsx
, also wenn Sie Ihre Bundle-Größe nicht erhöhen möchten, sollten Sie diese stattdessen verwenden - npmjs.com/package/clsxSie 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)}>
quelle
clsx
Paket ist kleiner alsclassnames
, deshalb bevorzuge ich diese Lösung@material-ui/core now depends on clsx, so if you don't want to increase your bundle size you'll want to use that instead
. Also +1 für diese Antwort.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
quelle
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 }>
quelle
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}`}>
quelle
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.
quelle
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'
quelle
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
quelle
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>
quelle
,
Wie bereits erwähnt, können Sie die Zeichenfolgeninterpolation verwenden
className={`${this.props.classes.container} ${this.props.classes.spacious}`}
Sie können auch die
classnames
Bibliothek https://www.npmjs.com/package/classnames ausprobierenquelle