Cách thêm nhiều lớp trong Material UI bằng cách sử dụng các lớp đạo cụ

Sử dụng phương thức css-in-js để thêm các lớp vào một thành phần phản ứng, làm cách nào để thêm nhiều thành phần?

Đây là biến lớp:

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

Đây là cách tôi sử dụng nó:

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

Các cách trên hoạt động, nhưng có cách nào để thêm cả hai lớp mà không sử dụng classNamesgói npm không? Cái gì đó như:

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

bạn có thể sử dụng nội suy chuỗi:

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

bạn có thể cài đặt gói này

https://github.com/JedWatson/classnames

và sau đó sử dụng nó như thế này

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'

Bạn có thể sử dụng clsx . Tôi nhận thấy nó được sử dụng trong các ví dụ về nút MUI

Trước tiên hãy cài đặt nó:

npm install --save clsx

Sau đó, nhập nó vào tệp thành phần của bạn:

import clsx from 'clsx';

Sau đó, sử dụng hàm đã nhập trong thành phần của bạn:

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

Để áp dụng nhiều lớp cho một thành phần, hãy bọc các lớp bạn muốn áp dụng trong classNames.

Ví dụ: trong tình huống của bạn, mã của bạn sẽ trông như thế này,

import classNames from 'classnames';

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

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

Đảm bảo rằng bạn nhập classNames !!!

Hãy xem tài liệu material ui nơi họ sử dụng nhiều lớp trong một thành phần để tạo một nút tùy chỉnh

Bạn cũng có thể sử dụng thuộc tính mở rộng ( plugin jss-extension được bật theo mặc định):

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

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

Tôi nghĩ điều này sẽ giải quyết được vấn đề của bạn:

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

và trong thành phần phản ứng:

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

Có, jss-composes cung cấp cho bạn điều này:

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

Và sau đó bạn chỉ cần sử dụng class.spacious.

classNames gói cũng có thể được sử dụng nâng cao như:

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'

Bạn có thể thêm nhiều lớp chuỗi và lớp biến hoặc lớp đạo cụ cùng lúc theo cách này

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

ba lớp cùng một lúc

Nếu bạn muốn gán nhiều tên lớp cho phần tử của mình, bạn có thể sử dụng mảng .

Vì vậy, trong đoạn mã của bạn ở trên, nếu this.props.classes giải quyết thành một cái gì đó như ['container', 'wide'], tức là nếu

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

bạn có thể chỉ cần gán nó cho div là

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

và kết quả sẽ là

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

Như đã đề cập, bạn có thể sử dụng nội suy chuỗi

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

Và bạn có thể thử classnamesthư viện, https://www.npmjs.com/package/classnames