CSS 모듈 및 리액트를 사용한 여러 클래스 이름

CSS 모듈 및 리액트를 사용한 여러 클래스 이름

다음 코드를 사용하여 소품에서 부울을 기반으로 React 컴포넌트에서 className을 동적으로 설정합니다.

<div className={this.props.menuOpen ? 'inactive' : 'active'}>
...
</div>

단, CSS 모듈도 사용하고 있기 때문에 className을 다음과 같이 설정해야 합니다.

import styles from './styles.css';

<div className={styles.sideMenu}>
...
</div>

여러 클래스를 제어하기 위해 클래스 이름을 사용하려고 했지만 className이 둘 다로 설정되도록 최종 결과가 필요하기 때문에 문제가 있습니다.styles.sideMenu 그리고. styles.active(CSS 모듈을 활성화하기 위해) 어떻게 대처해야 할지 잘 모르겠습니다.

어떤 안내라도 감사합니다.

클래스 이름 및 es6 사용:

let classNames = classnames(styles.sideMenu, { [styles.active]: this.props.menuOpen });

사용.classnames및 es5:

var classNames = classnames(styles.sideMenu, this.props.menuOpen ? styles.active : '');

파티에는 조금 늦었지만 문자열 템플릿을 사용하는 것이 좋습니다.삼진 연산자를 다른 상수로 옮길 수도 있습니다.

<div className={`${styles.sideMenu} ${this.props.menuOpen ? styles.inactive : styles.active}`>
...
</div>

더 나은 사용법을 추가하고 싶었어요.bind의 API.classnamesnpm. 클래스 이름을 다음과 같이 css에서 가져온 스타일 객체에 바인딩할 수 있습니다.

import classNames from 'classnames/bind';
import styles from './index.css';

let cx = classNames.bind(styles);

다음과 같이 사용합니다.

cx("sideMenu", "active": isOpen)

여기서 sideMenu 및 active는 스타일 객체입니다.

논리 사용AND3진 연산자 대신에 그 이후로 더 덜 장황하게 만든다.classnames거짓 값을 생략합니다.

<div className={ classNames(styles.sideMenu, this.props.menuOpen && styles.active) }></div>

이것이 실제 솔루션에 가장 가까운 방법입니다.

const isActive = this.props.menuOpen ? styles.inactive : styles.active;

<div className={isActive + ' ' + styles.sideMenu}>

이렇게 하면 됩니다. 둘 다 가져온 스타일시트의 스타일을 사용할 수 있으며 다음 경우에만 적용됩니다.this.props.menuOpen이true.

하지만, 그것은 꽤 진부하다 - 만약 누군가 아이디어가 있다면 나는 더 나은 해결책을 보고 싶다.

사용.Array.join

<div className={[styles.sideMenu, this.props.menuOpen ? styles.show : styles.hide].join(' ')}></div>

CSS 모듈 전문가는 아니지만 다음 문서를 찾았습니다.https://github.com/css-modules/css-modules/blob/master/docs/import-multiple-css-modules.md

다음에 대한 스타일을 조합해야 할 것 같습니다.active그리고.sideMenu함께 사용Object.assign

import classNames from 'classnames/bind'.

다음과 같이 사용할 수 있습니다.
let cx = classNames.bind(styles);

그런 경우에는styles['bar-item-active']두 번째 대괄호로 묶을 수 있습니다.[styles['bar-item-active']] : your condition

React DOM 요소에 style과 className Atribute를 모두 사용할 것을 제안하는 사람은 없는 것 같습니다.

const sideMenu={backgroundColour:'blue',
                border:'1px black solid'}

return <>
  <div style={sideMenu} className={this.props.menuOpen ? styles.inactive : styles.active}>
  ...
  </div>
</>

가장 깔끔한 솔루션은 아니지만 프로젝트에 종속성을 추가하는 것을 피할 수 있습니다.side Menu 클래스가 작을 경우 옵션일 수 있습니다.

클래스 이름 라이브러리 사용

import classNames from "classnames";

classNames함수입니다.끈을 몇 개 건네주면 끈이 다 뭉쳐요.있다면falsy끈으로 묶으면 통과할 수 없습니다.예를들면

 let textColor=undefined
 classNames(textColor, "px-2","py-2" )

textColor이고, 변수는 false입니다.classNames됩니다.

"px-2 py-2"

도 있어요.classNames★★★★★★ 。

 const active=true
 const foo=false

제가 이런 표정을 지었다고 칩시다.

classNames({
    'text-green':active,
     'text-yellow':foo
})

classNames이 '값'인 '값'으로 하겠습니다.truthy를 사용합니다만, 「VALUE「KEY」인 는, 「VALUE」를 「VALUE」로 합니다.falsyKEY 'KEY'는됩니다.에서는 "은 "active" true" "foo" false"가 됩니다.

 'text-green'

예에서는 이 "className"인지 합니다.truth ★★★★★★★★★★★★★★★★★」falsy, 를 나타냅니다.

let classNames=classNames(
    styles.sideMenu,
    // based on props that you are passing you can define dynamic classnames in your component
    {
      "active":this.props.menuOpen
    }
  )

언급URL : https://stackoverflow.com/questions/38382153/multiple-classnames-with-css-modules-and-react