BEM을 사용하여 className 및 css 모듈에 대한 올바른 인수 목록 구문

Question

React와 매우 간단한 CSS 모듈을 webpack과 함께 사용하고 있습니다. 또한 클래스 이름에 BEM을 사용합니다.

대시가있는 클래스 이름은 문자열 형식이 아니라면 유효하지 않으며 각 클래스 항목에 대한 css import 문을 반복적으로 참조하지 않는 문자열 버전을 아직 찾지 못했습니다.

두 가지 모두 이상적이지 않으며 라이브러리 사용을 피하고 싶습니다. 내가 classNames의 사용을 조언하지만 정말 조건부 클래스 이름을 추가 할 편리으로,

className={`${styles.foo} ${styles.bar}`} 

:이 당신은 템플릿 리터럴을 사용할 수

className={styles['one two']} 
className={styles['one', 'two']} 

Answer 1

작동하지 않습니다

<div className={classNames({[styles.foo]: true, [styles.bar]: true})}> 
<div className={[styles.foo, styles.bar].join(' ')}> 

. 바인드 된 접근 방법을 사용할 수도 있습니다.

var cx = classNames.bind(styles); 
className={cx('foo', 'bar')}