Cara menambahkan beberapa kelas di Material UI menggunakan props kelas

Menggunakan metode css-in-js untuk menambahkan kelas ke komponen react, bagaimana cara menambahkan beberapa komponen?

Berikut adalah variabel kelas:

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

Inilah cara saya menggunakannya:

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

Cara di atas berfungsi, tetapi apakah ada cara untuk menambahkan kedua kelas, tanpa menggunakan classNamespaket npm? Sesuatu seperti:

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

Anda dapat menggunakan interpolasi string:

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

Anda dapat menginstal paket ini

https://github.com/JedWatson/classnames

dan kemudian gunakan seperti ini

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'

Anda bisa menggunakan clsx . Saya perhatikan itu digunakan dalam contoh tombol MUI

Pertama instal:

npm install --save clsx

Kemudian impor ke file komponen Anda:

import clsx from 'clsx';

Kemudian gunakan fungsi yang diimpor di komponen Anda:

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

Untuk menerapkan beberapa kelas ke sebuah komponen, bungkus kelas yang ingin Anda terapkan dalam classNames.

Misalnya, dalam situasi Anda, kode Anda akan terlihat seperti ini,

import classNames from 'classnames';

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

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

Pastikan Anda mengimpor classNames !!!

Lihat dokumentasi ui material di mana mereka menggunakan beberapa kelas dalam satu komponen untuk membuat tombol yang disesuaikan

Anda juga dapat menggunakan properti perluasan ( plugin jss-expand diaktifkan secara default):

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

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

Saya pikir ini akan menyelesaikan masalah Anda:

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

dan dalam komponen reaksi:

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

Ya, jss-composes memberi Anda ini:

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

Dan kemudian Anda hanya menggunakan class.spacious.

classNames paket juga dapat digunakan semaju:

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'

Anda dapat menambahkan beberapa kelas string dan kelas variabel atau kelas alat peraga secara bersamaan dengan cara ini

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

tiga kelas pada waktu yang sama

Jika Anda ingin menetapkan beberapa nama kelas ke elemen Anda, Anda dapat menggunakan array .

Jadi dalam kode Anda di atas, jika this.props.classes memutuskan sesuatu seperti ['container', 'spacious'], yaitu jika

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

Anda cukup menetapkannya ke div sebagai

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

dan hasilnya akan seperti itu

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

Seperti yang telah disebutkan, Anda dapat menggunakan interpolasi string

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

Dan Anda dapat mencoba classnamesperpustakaan, https://www.npmjs.com/package/classnames