你好！作为一名在前端开发领域摸爬滚打多年的开发者，我非常理解初学者在从传统 HTML 转向 React 时遇到的种种困惑。其中，最让人抓狂的一个小细节莫过于：“为什么我用 class 给 div 设置样式没反应？”
别担心，你并没有做错什么，这只是 React 的一道“门槛”。在这篇文章中，我们将深入探讨 React 中的 className 属性。我们将一起揭开它背后的神秘面纱，了解为什么 React 选择了这种语法，以及如何在实际项目中高效地使用它来构建美观的用户界面。无论你是刚起步的新手，还是希望夯实基础的开发者，这篇文章都将为你提供详尽的解答和实战技巧。
核心概念：为什么是 className 而不是 class？
让我们先从最基础的概念开始。在传统的 HTML 开发中，如果我们想给一个元素添加样式，我们会非常自然地使用 class 属性。这是 Web 标准的一部分，就像呼吸一样自然。例如，我们要这样写：
Hello, World!
然而，当我们进入 React 的世界时，规则发生了一点微小的变化。你可能会注意到，我们在 JSX（JavaScript 的语法扩展）中必须使用 INLINECODEd7149095 来替代 INLINECODEcae9790c。
背后的技术原因
这并不是 React 故意刁难我们，而是出于对 JavaScript 语法的严谨尊重。
- 保留字冲突：在 JavaScript（特别是 ES6 标准发布后）中，INLINECODE701000cd 是一个关键字。它是用来定义类的语法糖。由于 JSX 在最终编译前本质上还是 JavaScript，如果在代码中直接使用 INLINECODE6bf77300，JavaScript 解析器就会试图将其解析为类定义，从而导致语法错误。
- JSX 的本质：JSX 仅仅是 INLINECODE324f76a3 方法的语法糖。当你写 INLINECODEc879049b 时，它会被转换成一个对象。在 JavaScript 对象中，我们不能使用保留字作为键名。因此，React 团队选择了
className这个名字，它既符合 JS 命名规范（驼峰命名法），又能准确传达其用途。
简单来说： 这是一个为了防止代码崩溃而做出的必要妥协。一旦你习惯了这一点，你会发现它很快就变成了肌肉记忆。
基础用法：如何在组件中应用样式
理解了原理之后，让我们看看如何在实际代码中使用它。在 React 中应用样式通常涉及三个步骤：编写 CSS、导入 CSS 以及在 JSX 中通过 className 关联。
场景 1：静态类名的应用
这是最简单的场景。假设我们有一个警告框组件，我们希望它有红色的背景和白色的文字。
首先，定义 CSS 类：
/* App.css */
.container {
padding: 20px;
font-family: Arial, sans-serif;
}
.alert-box {
background-color: #ff4d4d;
color: white;
padding: 15px;
border-radius: 5px;
text-align: center;
}
然后，在 React 组件中使用 className：
import React from ‘react‘;
import ‘./App.css‘; // 别忘了导入 CSS 文件
const App = () => {
return (
样式示例
{/* 注意这里使用的是 className 而不是 class */}
警告：这是一个重要的提示信息！
);
};
export default App;
在这个例子中，React 会在渲染时将 INLINECODE161bcded 转换成标准的 HTML INLINECODE8f944efc 属性，从而让浏览器正确应用样式。
进阶技巧：动态处理 className
在现代 Web 开发中，我们很少只写静态样式。我们经常需要根据用户的交互（如点击、输入）或组件的状态（如是否激活、是否出错）来动态改变样式。这就是 className 真正发挥威力的地方。
场景 2：条件渲染类名
假设我们正在制作一个开关按钮。当开关打开时，我们希望按钮显示为绿色（INLINECODEdaf91712），关闭时显示为灰色（INLINECODE0078a626）。
我们可以使用 ES6 的模板字符串（Template Literals）来实现这一点：
import React, { useState } from ‘react‘;
import ‘./App.css‘;
const ToggleButton = () => {
// 定义一个状态变量来跟踪开关状态
const [isActive, setIsActive] = useState(false);
// 切换状态的函数
const toggleStatus = () => {
setIsActive(!isActive);
};
return (
{/* 根据状态动态拼接类名 */}
{/* 这里的语法意思是：基础类名是 ‘btn‘，如果 isActive 为真，则追加 ‘active‘ 类名 */}
);
};
export default ToggleButton;
代码解析：
在代码中，我们使用了反引号 `INLINECODE8e023692 `INLINECODE5bbafdeb${isActive ? ‘active‘ : ‘inactive‘}INLINECODEa8641324isActiveINLINECODE2ddf3fddtrueINLINECODE75fb7743‘active‘INLINECODEf7966a21‘inactive‘INLINECODEe48a3b21classnamesINLINECODEf12b1512clsxINLINECODE35ed9fb4&&INLINECODE64c98c64classNameINLINECODE59504804todoINLINECODE36f8ab05filter(Boolean)INLINECODE4150c6ecfalseINLINECODE9c05bd02join(‘ ‘)INLINECODE53c3acfcclassNameINLINECODEdb097828classINLINECODE7fddb330‘active‘INLINECODEfcd46c89useEffectINLINECODE3d5f17b2document.getElementByIdINLINECODEaecaa70dclassINLINECODE97ee77b8classNameINLINECODE67cb8a38classNameINLINECODE48e18ae5App.module.cssINLINECODE325c3212style={{ color: ‘red‘ }}INLINECODEf7942d6aclassNameINLINECODE660d0c2bstyled-componentsINLINECODE6cda85a9classNameINLINECODE2d2abc06classNameINLINECODE0cde3fe8classINLINECODE7233378aclassNameINLINECODEb1f03a84classNameINLINECODE02e1c797clsx 或 classnames` 这两个 npm 库，看看它们是如何简化类名拼接逻辑的。
希望这篇文章能帮助你彻底搞定 React 中的样式问题。祝你编码愉快！