classnames——使用方法总结

安装#

1
# npm
2
npm i classnames
3
# or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`)
4
yarn add classnames

使用方法#

• classNames 函数接受任意数量的参数，可以是字符串或对象。参数 ‘foo’ 是 { foo: true } 的缩写。如果与给定键关联的值是虚假的，则该键将不会包含在输出中。

  1
  classNames('foo', 'bar'); // => 'foo bar'
  2
  classNames('foo', { bar: true }); // => 'foo bar'
  3
  classNames({ 'foo-bar': true }); // => 'foo-bar'
  4
  classNames({ 'foo-bar': false }); // => ''
  5
  classNames({ foo: true }, { bar: true, 'foo-bar': false }); // => 'foo bar'
  6
  classNames({ foo: true, bar: true }); // => 'foo bar'
  7
  
  8
  var arr = ['b', { c: true, d: false }];
  9
  classNames('a', arr); // => 'a b c'

  规则：

  • 简单类型，直接加到集合，(‘foo’, ‘bar’)
  • 数组，判断元素真假，加到集合 ({ foo: true }, { bar: true, ‘foo-bar’: false })
  • 对象，判断value真假，加到集合 [‘b’, { c: true, d: false }]

• 可以通过es6的模板字符串绑定类名

  1
  let buttonType = 'primary';
  2
  classNames({ [`btn-${buttonType}`]: true });

• 在react中使用

  1
  import classNames from 'classnames/bind';
  2
  
  3
  const Button = ({ isPressed, isHovered, label }) => {
  4
    return (
  5
      <button
  6
        className={classNames({
  7
          btn: true,
  8
          'btn-pressed': isPressed,
  9
          'btn-over': !isPressed && isHovered,
  10
        })}>
  11
        {label}
  12
      </button>
  13
    );
  14
  };
  15
  
  16
  export default Button;

  展开收起

• 通过classnames/bind去实现类名对象合并，比使用styles方式定义样式简单，以CSS Module方式绑定类名，classnames只是绑定类名

  1
  // 未使用classnames/bind前
  2
  import styles from './index.module.less';
  3
  
  4
  const Button = () => {
  5
    return <div className={`${styles["config"]} ${styles["config__title"]}`}></div>
  6
  }
  7
  
  8
  // 使用classnames/bind
  9
  import classNames from 'classnames/bind';
  10
  import styles from './index.module.less';
  11
  const cx = classNames.bind(styles);
  12
  
  13
  const Button = () => {
  14
    return <div className={cx('config', 'config__title')}></div>
  15
  }

  展开收起

  注意

  • styles方式：如果index.module.less中配置了对应的样式，那么会使用CSS Module方式，如果未配置则会显示undefined
  • classnames/bind方式：如果index.module.less中配置了对应的样式，那么会使用CSS Module方式，如果未配置则会走全局样式