클래스 소품을 사용하여 재료 UI에서 여러 클래스를 추가하려면 어떻게 해야 합니까?

클래스 소품을 사용하여 재료 UI에서 여러 클래스를 추가하려면 어떻게 해야 합니까?

사용방법css-in-js반응 컴포넌트에 클래스를 추가하는 방법, 여러 컴포넌트를 추가하려면 어떻게 해야 합니까?

class 변수는 다음과 같습니다.

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

clsx를 사용할 수 있습니다.MUI 버튼의 예에서 사용되고 있는 것을 알 수 있었습니다.

최초 설치:

npm install --save clsx

그런 다음 구성 요소 파일로 가져옵니다.

import clsx from 'clsx';

그런 다음 컴포넌트에 Import된 함수를 사용합니다.

<div className={ clsx(classes.container, 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'

컴포넌트에 여러 클래스를 적용하려면 classNames 내에서 적용할 클래스를 랩합니다.

예를 들어, 고객님의 경우 코드는 다음과 같아야 합니다.

import classNames from 'classnames';

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

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

class Names 를 Import 해 주세요.

1개의 컴포넌트에서 여러 클래스를 사용하여 커스터마이즈된 버튼을 만드는 머티리얼 UI 매뉴얼을 참조하십시오.

확장 속성을 사용할 수도 있습니다(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}`}>

이 방법으로 여러 문자열 클래스와 변수 클래스 또는 소품 클래스를 동시에 추가할 수 있습니다.

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

동시에 세 반

네, jss-composes는 다음을 제공합니다.

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

그리고 넌 그냥 class.spape를 사용해.

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'

다음 방법을 사용할 수 있습니다.

import clsx from 'clsx';
    
return <div className={clsx(classes.container, 'spacious')} />

이 링크는 도움이 됩니다.

그렇게 재료 UI에서 두 개의 클래스를 적용할 수 있습니다.

import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  spacious: {
    padding: 10,
  },
});

어떤 코드

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

재료 UI에서 비교 연산자를 사용하여 두 개의 클래스를 추가하는 방법.

비교 연산자를 사용하여 하나 또는 두 개의 클래스를 정의하려면

import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  maineButton: {
   borderRadius: "10px",
   minWidth: "80px",
   border: "1x solid #dcdcdc",
  },
  selectedButton: {
    border: "1x solid #3f51b5",
  },
});

어떤 코드

const [selected, setSelected] = useState(0);

어떤 코드

{data?.map((el, index) => (
   <ButtonBase 
     className={classNames(
        classes.maineButton, 
        index === selected && classes.selectedButton
        )}
     onClick{()=> setSelected(index)}
   >
     {el.text}
   </ButtonBase>
))}

선택되면 두 개의 클래스가 제공됩니다.

className={classNames(classes.maineButton, classes.selectedButton)}

만약 그렇지 않다면, 그것은 오직 하나일 것이다

className={classNames(classes.maineButton)}

요소에 여러 클래스 이름을 할당하려는 경우 배열을 사용할 수 있습니다.

따라서 위의 코드에서 this.props.classes가 ['container', 'sprepous']와 같이 해결되면 다음과 같이 됩니다.

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

단순히 div에 할당할 수 있습니다.

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

그리고 그 결과는

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

설명만 하면 쉽게 할 수 있습니다.결국 JavaScript 오브젝트는 다음과 같습니다.

const truncate = {
  width: '100px',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
};
email: {
    color: '#747474',
    ...truncate,
  },

언급URL : https://stackoverflow.com/questions/46066675/how-to-add-multiple-classes-in-material-ui-using-the-classes-props