classnames & css module

• JavaScript

classnames 库提供了一个 bind API，用于处理 CSS Module 的情况。

在 Webpack 中用 CSS Module 的方案编译 CSS 文件，后续在 JavaScript 中 import style from 'xxx.css'; 后，style 就是一个对象。这个对象的大体结构如下：

style = {
  foo: 'foo-abcde',
  bar: 'bar-12345',
  // ...
};

其中，对象的 key 是原始的 class name，而 value 则是施加 CSS Module 之后得到的唯一名称。

如果直接使用 classnames 的标准 API，那么写起来就需要大量使用 computed property name 的语法，比如：

<div className={classnames({ [style.foo]: true, [style.bar: false ]})} />

而使用 bind API，可以事先告知 classnames class name 的对应关系（通过指定 this），后续只需要使用字符串，classnames 就可以自动使用合适的结果：

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

const cx = classNames.bind(styles);

const Component = () => (
  // result in: className="foo-abcde"
  <div className={cx({ foo: true, bar: false })} />
);