Next.js-工具类：cn 组合、简化多个 CSS 类名，动态添加或移除类名

cn 是一个常用的工具函数，用于简化和组合多个 CSS 类名。它通常用于动态地添加或移除类名，尤其是在需要条件性地添加类名的情况下非常有用。

cn 函数的作用

1. 组合多个类名：
   • 将多个类名字符串组合成一个单一的字符串。
   • 可以方便地处理动态类名。
2. 条件性添加类名：
   • 根据条件决定是否添加某个类名。

示例代码

假设你有一个 utils 文件夹中的 cn 函数定义如下：

引用：

import { cn } from '@/lib/utils';

// src/lib/utils.ts 
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
	return twMerge(clsx(inputs))
}

使用示例

1. 基本用法：

	import { cn } from '@/lib/utils'; 
	const className = cn('text-blue-500', 'font-bold'); 
	// 结果：`"text-blue-500 font-bold"` 
	<div className={className}>Hello, world!</div>

2. 条件性添加类名：

import { cn } from '@/lib/utils'; 
const isActive = true; 
const className = cn(
	'text-blue-500',
	'font-bold',
	{ 'bg-red-500': isActive },
	{ 'bg-green-500': !isActive }
); 
// 如果 `isActive` 为 `true`，结果为 `"text-blue-500 font-bold bg-red-500"` 
// 如果 `isActive` 为 `false`，结果为 `"text-blue-500 font-bold bg-green-500"` 
<div className={className}>Hello, world!</div>

更复杂的用法

你还可以传递对象来组合类名：

const isActive = true; 
const isSmallScreen = false; 
const className = cn(
	'text-blue-500 font-bold',
	{ 'bg-red-500': isActive },
	{ 'bg-green-500': !isActive },
	{ 'text-sm': isSmallScreen },
	{ 'text-lg': !isSmallScreen }
);
// 如果 `isActive` 为 `true` 且 `isSmallScreen` 为 `false`，结果为 `"text-blue-500 font-bold bg-red-500 text-lg"`
// 如果 `isActive` 为 `false` 且 `isSmallScreen` 为 `true`，结果为 `"text-blue-500 font-bold bg-green-500 text-sm"` 
<div className={className}>Hello, world!</div>

总结

cn 函数的主要作用是简化类名的管理和组合，特别是在需要动态添加类名的情况下。这样可以让你的代码更加简洁和可维护。希望这能帮助你理解 cn 函数的作用及其用法。