Как добавить несколько классов в пользовательский интерфейс материалов с помощью свойств классов

Как добавить несколько компонентов с помощью метода 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'

Вы можете использовать clsx . Я заметил, что это используется в примерах кнопок MUI

Сначала установите его:

npm install --save clsx

Затем импортируйте его в свой файл компонента:

import clsx from 'clsx';

Затем используйте импортированную функцию в своем компоненте:

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

Чтобы к компоненту применялось несколько классов, оберните классы, которые вы хотите применить, в 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