(postCSS: css-module) classNames 여러개 지정하기 (라이브러리: classnames)

Alternate bind version (for css-modules)

github.com/rtsao/csjs/wiki/How-to-apply-multiple-classnames-to-an-element

github.com/JedWatson/classnames#classnames

 

0. INSTALL

npm install classnames

yarn add classnames

 

1. IMPORT 

import classNames from 'classnames'

 

2. USAGE #1

import classNames from "classnames/bind";

 

var styles = {

  foo: 'abc',

  bar: 'def',

  baz: 'xyz'

};

var cx = classNames.bind(styles);

★즉, 위 styles 변수에 classname을 지정하면 된다. 그리고 cx변수를 만들어 .bind(styles)를 하여 결합한다!

 

var className = cx('foo', ['bar'], { baz: true }); // => "abc def xyz"

 

2. USAGE #2

/* components/submit-button.js */

import { Component } from 'react';

import classNames from 'classnames/bind';

import styles from './submit-button.css';

 

let cx = classNames.bind(styles);

 

export default class SubmitButton extends Component {

  render () {

    let text = this.props.store.submissionInProgress ? 'Processing...' : 'Submit';

    let className = cx({

      base: true,

      inProgress: this.props.store.submissionInProgress,

      error: this.props.store.errorOccurred,

      disabled: this.props.form.valid,

    });

    return <button className={className}>{text}</button>;

  }

};

 

3. Conditional Classes

export default class Button extends React.Component {

  render () {

    let btnClass = classNames({

      'btn': true,

      'btn-pressed': this.state.isPressed,

      'btn-over': !this.state.isPressed && this.state.isHovered

    })

    return <button className={btnClass}>{this.props.title}</button>

  }

}

 

4. Dynamic class name

const buttonType = 'primary'

classNames({ [`btn-${buttonType}`]: true })