Как добавить несколько компонентов с помощью метода css-in-js для добавления классов в компонент реакции?
Вот переменная классов:
const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap'
},
spacious: {
padding: 10
},
});
Вот как я это использовал:
return (
<div className={ this.props.classes.container }>
Вышеупомянутое работает, но есть ли способ добавить оба класса без использования classNames
пакета npm? Что-то типа:
<div className={ this.props.classes.container + this.props.classes.spacious}>
Ответы:
вы можете использовать строковую интерполяцию:
<div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>
источник
вы можете установить этот пакет
https://github.com/JedWatson/classnames
а затем используйте это так
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'
источник
@material-ui/core
теперь зависит отclsx
, поэтому, если вы не хотите увеличивать размер пакета, вы захотите использовать его вместо этого - npmjs.com/package/clsxВы можете использовать clsx . Я заметил, что это используется в примерах кнопок MUI
Сначала установите его:
npm install --save clsx
Затем импортируйте его в свой файл компонента:
import clsx from 'clsx';
Затем используйте импортированную функцию в своем компоненте:
<div className={ clsx(classes.container, classes.spacious)}>
источник
clsx
package меньше чемclassnames
, поэтому я предпочитаю это решение@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
. Итак, +1 за этот ответ.Чтобы к компоненту применялось несколько классов, оберните классы, которые вы хотите применить, в classNames.
Например, в вашей ситуации ваш код должен выглядеть так:
import classNames from 'classnames'; const styles = theme => ({ container: { display: "flex", flexWrap: "wrap" }, spacious: { padding: 10 } }); <div className={classNames(classes.container, classes.spacious)} />
Убедитесь, что вы импортируете classNames !!!
Взгляните на документацию по пользовательскому интерфейсу материалов, где они используют несколько классов в одном компоненте для создания настраиваемой кнопки.
источник
Вы также можете использовать свойство extend ( плагин jss-extend включен по умолчанию):
const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spaciousContainer: { extend: 'container', padding: 10 }, }); // ... <div className={ this.props.classes.spaciousContainer }>
источник
Думаю, это решит вашу проблему:
const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, });
и в реакционном компоненте:
<div className={`${classes.container} ${classes.spacious}`}>
источник
Да, jss-composes предоставляет вам это:
const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { composes: '$container', padding: 10 }, });
И тогда вы просто используете classes.spacious.
источник
classNames
пакет также можно использовать как расширенный: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'
источник
Таким образом вы можете одновременно добавить несколько строковых классов и классов переменных или классов свойств.
className={`${classes.myClass} ${this.props.classes.myClass2} MyStringClass`}
три класса одновременно
источник
Если вы хотите присвоить своему элементу несколько имен классов , вы можете использовать массивы .
Итак, в приведенном выше коде, если this.props.classes преобразуется во что-то вроде ['container', 'large'], т.е. если
this.props.classes = ['container', 'spacious'];
вы можете просто назначить его div как
<div className = { this.props.classes.join(' ') }></div>
и результат будет
<div class='container spacious'></div>
источник
,
в результате классы названы разделеннымиКак уже упоминалось, вы можете использовать интерполяцию строк
className={`${this.props.classes.container} ${this.props.classes.spacious}`}
И вы можете попробовать
classnames
библиотеку https://www.npmjs.com/package/classnamesисточник