classnames的作用

React
组件css

classnames 是一个 字符串拼接工具，用于合并 className，支持：

• 条件拼接
• 数组合并
• 去除 false、undefined、null 等无效值

import cn from 'classnames';

const classes = cn(
  'btn',
  false && 'hidden',  // ❌ false 值不会生效
  'btn-primary',
  ['rounded', 'shadow'], // ✅ 支持数组
);
console.log(classes); 
// 输出: "btn btn-primary rounded shadow"

---

classnames详细介绍

classnames 是一个非常常用的 JavaScript 工具库，用于在 React（或其他框架）中优雅地拼接 CSS class 字符串，通常配合 tailwindcss、条件渲染 class、组件状态切换 等场景使用。

在 React 项目中，你经常会看到：

import cn from 'classnames';

这里 cn 只是一个变量名，可以叫 classNames、cx 或任何名字，本质上就是 classnames 这个函数。

1. 核心功能

• 根据条件动态添加或忽略 CSS class
• 支持字符串、对象、数组多种输入方式
• 返回最终的 class 字符串

---

2. 安装

npm install classnames

或 Yarn：

yarn add classnames

---

3. 基本用法

1) 传入字符串

import cn from 'classnames';

const btnClass = cn('btn', 'btn-primary', 'rounded');
// => "btn btn-primary rounded"

多个字符串会被合并成一个字符串。

---

2) 传入对象（条件类）

const isActive = true;
const isDisabled = false;

const btnClass = cn('btn', {
  'btn-active': isActive,
  'btn-disabled': isDisabled,
});
// => "btn btn-active"

• 键（Key）：class 名称
• 值（Value）：布尔值，true 才会保留，false 会被忽略

---

3) 传入数组

const btnClass = cn('btn', ['rounded', 'shadow'], { 'btn-active': true });
// => "btn rounded shadow btn-active"

数组元素会被依次合并，支持混合对象/字符串。

---

4) React 结合示例

import React from 'react';
import cn from 'classnames';

function Button({ primary, disabled }) {
  return (
    <button
      className={cn(
        'px-4 py-2 rounded',
        {
          'bg-blue-500 text-white': primary,
          'bg-gray-200 text-gray-500': disabled,
        }
      )}
      disabled={disabled}
    >
      点击我
    </button>
  );
}

export default Button;

当 primary=true 时输出：

px-4 py-2 rounded bg-blue-500 text-white

当 disabled=true 时输出：

px-4 py-2 rounded bg-gray-200 text-gray-500

---

4. 高级用法

1) 条件链式写法

const cardClass = cn(
  'p-4 border rounded',
  primary && 'bg-blue-50',
  disabled && 'opacity-50'
);

• false 或 undefined 会被自动忽略
• true 返回对应 class

---

2) 动态组合

function getClass(size) {
  return cn('btn', {
    'btn-sm': size === 'small',
    'btn-lg': size === 'large',
  });
}

getClass('large'); // => "btn btn-lg"

---

5. 典型应用场景

1. 按钮状态：根据 disabled 或 active 控制样式
2. 表单验证：输入错误时高亮红框

3. Tailwind CSS 动态类组合：

   const inputClass = cn(
     'border p-2',
     error ? 'border-red-500' : 'border-gray-300'
   );
   

4. 条件渲染多主题样式

6. 总结

• classnames 是一个简单但高效的 className 拼接工具

• 优点：

  • 语法简洁
  • 适合 React + Tailwind 动态样式
  • 体积小，常被打包工具 Tree Shaking

• 缺点：

  • 仅处理字符串拼接，不做样式逻辑（需搭配 CSS/Tailwind）