当前位置：首页 > article >正文

clsx 使用指南

article 2025/3/30 17:53:06

clsx 使用指南

轻量级 CSS 类名管理工具（专为 React 优化

安装方法

# NPM
npm install clsx

# Yarn
yarn add clsx

# PNPM
pnpm add clsx

基础用法

字符串拼接

clsx('btn', 'btn-primary')  
// → "btn btn-primary"

对象条件

clsx({ 
  'btn-active': isActive,
  'btn-disabled': false 
})
// → "btn-active"（当 isActive=true）

数组嵌套

clsx(['btn', ['btn-primary', { 'btn-sm': isSmall }]])
// → "btn btn-primary btn-sm"（当 isSmall=true）

高级技巧

逻辑运算符组合

clsx(
  'input', 
  hasError && 'input-error',
  isFocused || 'input-blur'
)

循环动态类名

{items.map(item => (
  <div 
    key={item.id}
    className={clsx('item', item.isSelected && 'selected')}
  />
))}

CSS Modules 集成

import styles from './App.module.css';

clsx(styles.container, styles.darkMode)

性能对比

特性	clsx	classnames
体积‌	228B	330B
执行速度‌	⚡ 更快	🐢 较慢
TS 支持‌	严格类型推导	基础类型支持

最佳实践
避免深度嵌套‌

```typescript
// ❌ 避免
clsx(isA ? (isB ? 'a' : 'b') : 'c')

// ✅ 推荐
clsx({ a: isA && isB, b: isA && !isB, c: !isA })

提取复用逻辑‌

// utils/styles.ts
export const getButtonClass = (status: Status) => 
  clsx('base-btn', {
    'loading': status === 'LOADING',
    'error': status === 'ERROR'
  })

注意事项

⚠️ ‌特殊值处理‌
0 会被保留为有效值：

clsx(0, 'zero')  // → "0 zero"

⚠️ ‌类型安全‌
避免混合类型参数：

// ❌ 不推荐
clsx('text', someBoolean && 123)

// ✅ 推荐
clsx('text', someBoolean && 'active')

示例代码
复杂组件场景

const Notification = ({ type, isUnread }: Props) => {
  return (
    <div className={clsx(
      'notification',
      `notification-${type}`,  // 动态模板字符串
      { 'unread': isUnread }
    )}>
      {/* content */}
    </div>
  )
}