React 样式方案

学习React中的多种样式方案：内联样式、CSS Modules、CSS-in-JS、条件样式 · 难度：进阶 · +15XP

### React 样式方案概览

React支持多种样式方案，各有适用场景。

方案	优点	缺点
	内联样式	简单直接，动态方便	无伪类/媒体查询
	CSS文件	传统熟悉	全局污染风险
	CSS Modules	局部作用域	需构建配置
	CSS-in-JS	动态强大	运行时开销

### 内联样式

const style = {
    color: isActive ? "blue" : "gray",
    fontSize: 16,
    padding: "10px 20px"
};
<div style={style}>动态样式</div>

### 条件className

<div className={`card ${isActive ? "active" : ""}`}>
<div className={["card", isActive && "active"].filter(Boolean).join(" ")}>

### 💡 练习 创建一组标签：根据状态变化颜色和样式，选中的标签高亮。

学习与实践建议

1. 先理解本节的核心概念和语法规则
2. 在右边编辑器中修改示例代码，观察运行结果变化
3. 尝试用学到的知识完成一个小练习——比如自己写一个工具函数或小程序
4. 遇到问题时，查阅官方文档是最快的学习途径

编程是门实践技能，动手写代码比看教程重要得多。坚持每天练习，你会很快看到进步！