Jak dodać wiele komponentów za pomocą metody css-in-js do dodawania klas do komponentu reagującego?
Oto zmienna klas:
const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap'
},
spacious: {
padding: 10
},
});
Oto jak to wykorzystałem:
return (
<div className={ this.props.classes.container }>
Powyższe działa, ale czy jest sposób na dodanie obu klas bez użycia classNames
pakietu npm? Coś jak:
<div className={ this.props.classes.container + this.props.classes.spacious}>
Odpowiedzi:
możesz użyć interpolacji ciągów:
<div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>
źródło
możesz zainstalować ten pakiet
https://github.com/JedWatson/classnames
a następnie użyj go w ten sposób
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'
źródło
@material-ui/core
teraz zależy odclsx
, więc jeśli nie chcesz zwiększać rozmiaru pakietu, zechcesz go zamiast tego użyć - npmjs.com/package/clsxMożesz użyć clsx . Zauważyłem, że został użyty w przykładach przycisków MUI
Najpierw zainstaluj:
npm install --save clsx
Następnie zaimportuj go do pliku komponentu:
import clsx from 'clsx';
Następnie użyj zaimportowanej funkcji w swoim komponencie:
<div className={ clsx(classes.container, classes.spacious)}>
źródło
clsx
paczka jest mniejsza niżclassnames
, więc wolę to rozwiązanie@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
. Więc +1 za tę odpowiedź.Aby zastosować wiele klas do składnika, zawiń klasy, które chcesz zastosować, w ClassNames.
Na przykład w Twojej sytuacji kod powinien wyglądać następująco:
import classNames from 'classnames'; const styles = theme => ({ container: { display: "flex", flexWrap: "wrap" }, spacious: { padding: 10 } }); <div className={classNames(classes.container, classes.spacious)} />
Upewnij się, że importujesz nazwy klas !!!
Zapoznaj się z dokumentacją interfejsu użytkownika, w której używają wielu klas w jednym komponencie, aby utworzyć niestandardowy przycisk
źródło
Możesz także skorzystać z właściwości Extend (wtyczka jss-Extend jest domyślnie włączona):
const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spaciousContainer: { extend: 'container', padding: 10 }, }); // ... <div className={ this.props.classes.spaciousContainer }>
źródło
Myślę, że to rozwiąże twój problem:
const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, });
oraz w komponencie reakcyjnym:
<div className={`${classes.container} ${classes.spacious}`}>
źródło
Tak, jss-composes zapewnia to:
const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { composes: '$container', padding: 10 }, });
A potem po prostu używasz classes.spacious.
źródło
classNames
Pakiet może być również używany tak zaawansowany, jak: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'
źródło
W ten sposób możesz dodać wiele klas ciągów i klas zmiennych lub klas właściwości
className={`${classes.myClass} ${this.props.classes.myClass2} MyStringClass`}
trzy zajęcia w tym samym czasie
źródło
Jeśli chcesz przypisać wiele nazw klas do swojego elementu, możesz użyć tablic .
Tak więc w powyższym kodzie, jeśli this.props.classes jest tłumaczone na coś takiego jak ['container', 'przestronny'], tj.
this.props.classes = ['container', 'spacious'];
możesz po prostu przypisać go do div as
<div className = { this.props.classes.join(' ') }></div>
a wynik będzie
<div class='container spacious'></div>
źródło
,
w rezultacieJak już wspomniano, możesz użyć interpolacji ciągów
className={`${this.props.classes.container} ${this.props.classes.spacious}`}
Możesz też wypróbować
classnames
bibliotekę https://www.npmjs.com/package/classnamesźródło