Class props kullanarak Material UI'de birden çok sınıf ekleme

Bir react bileşenine sınıf eklemek için css-in-js yöntemini kullanarak birden çok bileşeni nasıl eklerim?

İşte sınıflar değişkeni:

const styles = theme => ({
 container: {
  display: 'flex',
  flexWrap: 'wrap'
},
 spacious: {
  padding: 10
},
});

İşte onu nasıl kullandım:

    return (
     <div className={ this.props.classes.container }>

Yukarıdakiler çalışır, ancak classNamesnpm paketini kullanmadan her iki sınıfı da eklemenin bir yolu var mı? Gibi bir şey:

     <div className={ this.props.classes.container + this.props.classes.spacious}>

dize enterpolasyonunu kullanabilirsiniz:

<div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>

bu paketi kurabilirsin

https://github.com/JedWatson/classnames

ve sonra bunu böyle kullan

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 kullanabilirsiniz . MUI düğme örneklerinde kullanıldığını fark ettim

Önce kurun:

npm install --save clsx

Ardından bunu bileşen dosyanıza içe aktarın:

import clsx from 'clsx';

Ardından, bileşeninizde içe aktarılan işlevi kullanın:

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

Bir bileşene birden çok sınıfın uygulanmasını sağlamak için, sınıf adları içinde uygulamak istediğiniz sınıfları kaydırın.

Örneğin, sizin durumunuzda, kodunuz şöyle görünmelidir,

import classNames from 'classnames';

const styles = theme => ({
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  spacious: {
    padding: 10
  }
});

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

ClassNames'i içe aktardığınızdan emin olun !!!

Özelleştirilmiş bir düğme oluşturmak için tek bir bileşende birden çok sınıf kullandıkları malzeme kullanıcı arabirimi belgelerine bir göz atın

Ayrıca, ext özelliğini de kullanabilirsiniz ( jss-extended eklentisi varsayılan olarak etkindir):

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap'
  },
  spaciousContainer: {
    extend: 'container',
    padding: 10
  },
});

// ...
<div className={ this.props.classes.spaciousContainer }>

Sanırım bu sorununuzu çözecek:

const styles = theme => ({
 container: {
  display: 'flex',
  flexWrap: 'wrap'
},
 spacious: {
  padding: 10
},
});

ve reaksiyon bileşeninde:

<div className={`${classes.container} ${classes.spacious}`}>

Evet, jss-composes size şunu sağlar:

const styles = theme => ({
 container: {
  display: 'flex',
  flexWrap: 'wrap'
},
 spacious: {
  composes: '$container',
  padding: 10
},
});

Ve sonra sadece sınıfları kullanırsın. Geniş.

classNames paket aynı zamanda gelişmiş olarak da kullanılabilir:

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'

Bu şekilde aynı anda birden çok dize sınıfı ve değişken sınıfı veya sahne sınıfı ekleyebilirsiniz.

className={`${classes.myClass}  ${this.props.classes.myClass2} MyStringClass`}

aynı anda üç sınıf

İsterseniz birden sınıf atamak için elemana isimleri yapabilirsiniz diziler kullanın .

Dolayısıyla, yukarıdaki kodunuzda this.props.classes ['kapsayıcı', 'geniş'] gibi bir şeye çözümlenirse, yani

this.props.classes = ['container', 'spacious'];

basitçe div olarak atayabilirsiniz

<div className = { this.props.classes.join(' ') }></div>

ve sonuç olacak

<div class='container spacious'></div>

Daha önce belirtildiği gibi, dize enterpolasyonunu kullanabilirsiniz.

className={`${this.props.classes.container}  ${this.props.classes.spacious}`}

Ve classnameskitaplığı deneyebilirsiniz , https://www.npmjs.com/package/classnames