Cara menambahkan beberapa kelas di Material UI menggunakan props kelas


92

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}>

3
Mungkin saya melewatkan sesuatu, tetapi tidak bisakah Anda melakukan <div className = "container spacious"> Mengapa Anda harus meneruskannya sebagai properti?
Leo Farmer

2
Anda baru saja kehilangan spasi di antara dua classNames.
Shanimal

Ya, seperti yang dinyatakan di atas, Anda hanya perlu menggabungkan kelas dengan benar dengan spasi di antaranya! Tidak perlu paket tambahan apa pun.
Taylor A. Leach

Jawaban:


180

Anda dapat menggunakan interpolasi string:

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

5
dan ingatlah untuk tidak menambahkan koma di antara kelas! Saya melakukannya karena kesalahan dan yang pertama pecah diam-diam tanpa menyadarinya untuk beberapa saat
Pere

Dan harus ada ruang di antara kelas
Yoel

49

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'

3
Ini adalah pendekatan yang digunakan Material-UI dalam beberapa contohnya, dan berfungsi dengan baik jadi saya akan merekomendasikan ini.
Craig Myles

2
Ini harus menjadi jawaban yang diterima. Bekerja seperti yang diharapkan
Howie

2
Telah menggunakan pendekatan ini juga. Berguna tidak hanya untuk memiliki banyak nama kelas tetapi juga untuk membuatnya bersyarat.
ritsleting

4
@material-ui/coresekarang tergantung clsx, jadi jika Anda tidak ingin meningkatkan ukuran bundel Anda, Anda akan ingin menggunakannya - npmjs.com/package/clsx
Wayne Bloss

34

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)}>


5
clsxpaket lebih kecil dari classnames, jadi saya lebih suka solusi ini
Hoang Trinh

2
clsx disertakan dalam Material UI, jadi lebih disukai daripada nama kelas
DBrown

1
Per Wayne Bloss' komentar di bawah jawaban yang kurang optimal Mini: @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. Jadi, +1 untuk jawaban ini.
cssyphus

20

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


9

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 }>

2
Sayangnya, tidak diaktifkan secara default lagi ... pilih untuk mengaktifkan di sini
egerardus

7

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}`}>


2

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'

tampilkan kesalahan pembuatan webpack: Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan 'nama kelas' dalam
Pranay Soni

1

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


-1

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>

apakah Anda yakin kelas diberi nama dipisahkan oleh ,dalam hasil
Pardeep Jain

8
Tidak yakin mengapa ini adalah jawaban yang diterima, @Glauber Ramos benar, UI Material tidak berfungsi seperti itu.
timotgl

-1

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


Kedua bagian dari jawaban Anda diberikan sebelumnya oleh anggota lain. Yang Anda lakukan hanyalah mengulanginya dalam satu jawaban. -1 (Sarankan Anda menghapus jawaban ini dan memulihkan 2pts Anda)
cssyphus
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.