1
yarn add classnames

1
import classNames from 'classnames'
2

3
classNames('one', 'two') // = ‘one two‘
4
classNames('one', { two: true }) // = ‘one two‘
5
classNames('one', { two: false }) // = ‘one‘
6
classNames('one', ['two', 'three']) // = ‘one two three‘
7

8
const myClass = 'hello'
9
classNames('one', myClass, { myCondition: true }) // = ‘one hello myCondition'

1
/**
2
 * highlighted 값이 true면, highlighted 클래스가 적용
3
 * theme으로 전달받는 문자열은 내용 그대로 클래스에 적용
4
 */
5
const MyComponent = ({ highlighted, theme }) => (
6
  <div className={classNames('MyComponent', { highlighted }, theme)}>Hello</div>
7
)

1
const MyComponent = ({ highlighted, theme }) => (
2
  <div className={`MyComponent ${theme} ${highlighted ? 'highlighted' : ''}`}>Hello</div>
3
)