classNames

提供灵活控制类样式的工具, 可直接使用字符串, 数组, 对象, 以及混合使用, 非常适合于 TailwindCSS, Bootstrap 等这类一类名为样式控制的库.

https://www.npmjs.com/package/classnames

安装脚本:

npm i classnames

导入语法:

const classNames = require('classnames')
// 或者
import classNames from 'classnames'

导入后得到一个函数 classNames(), 该函数可以接收多个参数, 每一个参数都可以是: 字符串, 数组, 简单对象. 甚至是嵌套数组 (数组会被扁平化). 所有的参数都是围绕类样式名来呈现. classNames() 会将参数中描述的所有有效的类样式拼成一个字符串返回.

基本用法:

classNames('foo', 'bar'); // => 'foo bar'

classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

classNames('foo', { bar: true }); // => 'foo bar'

// 可以混合使用
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); 
// => 'foo bar baz quux'

// 非 true 的会被忽略掉
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); 
// => 'bar 1'

// 数组会被扁平化
classNames('a', ['b', { c: true, d: false }]); // => 'a b c'

// 支持动态类名 (可以支持模块化类名)
let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });

classnames 还提供了一个移除重复类名的版本. 导出的 api 一样, 只需要更新导出的路径即可:

import classNames from 'classnames/dedupe'

它会将所有的类样式去重后返回.

还有一个绑定的版本, 专门为模块化 CSS 所设计.

将映射绑定到 classnames 中.
使用时, 直接操作语义化名即可.

普通模式用法举例:

import styles from './Button.module.css';
import classNames from 'classnames';

const buttonClass = classNames(styles.button, {
  [styles.primary]: isPrimary // 需要手动使用 `[]` 语法进行映射
});

对比绑定模式用法:

import styles from './Button.module.css';
import classNames from 'classnames';

const cx = classNames.bind(styles); // 预先绑定样式对象

const buttonClass = cx('button', { // 直接使用字符串类名
  primary: isPrimary
});