React 套件-樣式 clsx

npm i clsx@1.2.1
https://github.com/lukeed/clsx#readme

載入

import 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'

API

clsx(...input)
Returns: String

input
Type: Mixed

clsx函式 可接受多個參數, 每個參數可以是 Object、Array、Boolean或String。

clsx 函數

1. 會忽略(discarded)那些被視為"假"的值(falsey values)，比如 false、null、undefined、0、NaN 或空字串 ''。
2. 若參數是獨立的布林值，也會被忽略。
3. 只有真實存在的值會被保留並用於生成最終的字串返回。

clsx(true, false, '', null, undefined, 0, NaN);
//=> ''  會被忽略!!!

DevTool styled-component 畫面渲染後的 class值