Як додати кілька класів в інтерфейсі матеріалу за допомогою реквізиту класів

Використання методу 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 !!!

Погляньте на документацію щодо користувацького інтерфейсу, де вони використовують кілька класів в одному компоненті, щоб створити індивідуальну кнопку

Ви також можете використовувати властивість extension (плагін jss-extension увімкнено за замовчуванням):

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-composed надає вам таке:

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 вирішує щось на зразок ['контейнер', 'просторий'], тобто якщо

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