今日推荐库：classnames、clsx动态生成 CSS 类名的 JavaScript 工具库,高效且好用！

classnames

classnames - npm

npm install classnames

classnames 是一个用于动态生成 CSS 类名的 JavaScript 库，通常用于 React 项目，但也可以在其他 JavaScript 框架或纯 JavaScript 中使用。

它的作用是方便地根据条件拼接字符串，以动态生成元素的类名。这对于根据状态、属性或其他条件来动态应用样式非常有用。下面是一个简单的示例：

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => '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'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

clsx

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

clsx 是另一个类似于 classnames 的库，用于在 JavaScript 中轻松处理动态类名。它的设计目标是提供简单、轻量级的类名处理，并且支持在不同的JavaScript环境中使用，例如在React、Vue、Angular等框架中。

使用 clsx 通常涉及传递一系列字符串或对象，它会根据条件自动合并为最终的类名字符串。以下是一个简单的示例：

npm install --save clsx

mport clsx from 'clsx';
// or
import { clsx } from 'clsx';

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'