클래스 소품을 사용하여 머티리얼 UI에 여러 클래스를 추가하는 방법

css-in-js 메서드를 사용하여 반응 구성 요소에 클래스를 추가하는 경우 여러 구성 요소를 추가하려면 어떻게해야합니까?

다음은 클래스 변수입니다.

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

사용 방법은 다음과 같습니다.

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

위는 작동하지만 classNamesnpm 패키지 를 사용하지 않고 두 클래스를 모두 추가하는 방법이 있습니까? 다음과 같은 것 :

     <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를 가져와야합니다 !!!

하나의 구성 요소에서 여러 클래스를 사용하여 사용자 정의 버튼을 만드는 재료 UI 문서를 살펴보십시오.

extend 속성을 사용할 수도 있습니다 ( jss-extend 플러그인 은 기본적으로 활성화 됨).

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-composes는 다음을 제공합니다.

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

그런 다음 클래스를 사용합니다.

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가 [ 'container', 'spacious']와 같은 것으로 확인되면, 즉

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

그리고 https://www.npmjs.com/package/classnamesclassnames 라이브러리 를 사용해 볼 수 있습니다.