👋 欢迎回到《前端达人 · React 播客书单》第 12 期（正文内容为学习笔记摘要，音频内容是详细的解读，方便你理解），请点击下方收听
写了那么多组件，是不是也想让它们“好看起来”？今天我们带你用两种新方式，告别样式混乱，一步步走上前端组件化样式的正道！
✅ 今日学习目标一览
📌 本期聚焦：
解决 Plain CSS 带来的样式冲突问题
学会使用 CSS Modules 实现组件级样式隔离
初步掌握 CSS-in-JS，体验 Emotion 的动态样式魅力
🧩 Plain CSS 为何不够用？
Plain CSS 就像“群发短信”，谁都能收到，但没人知道到底发给谁。
所有样式默认是全局的
类名一重复，样式就出事
于是，我们需要 “局部样式” 的能力，让每个组件都穿上“独立制服”。
🔐 CSS Modules：给每个组件一个独立小空间
CSS Modules 是什么？
一种可以给每个组件自动生成唯一类名的技术
样式不会全局污染，安全感 MAX！
✅ 只需给文件起名为 .module.css，CRA 项目中就能直接用，不需配置。
✍️ CSS Modules 怎么用？
创建样式文件（文件名要叫
xxx.module.css）：
/* Alert.module.css */
.container { padding: 12px; }
.warning { background-color: yellow; }在组件中导入样式：
import styles from './Alert.module.css';使用 className 引用：
<div className={`${styles.container} ${styles.warning}`}>
Hello World
</div>✅ 类名实际会被变成一串 hash，彻底杜绝重复！
📊 CSS Modules 有啥优缺点？
✅ 优点 |
⚠️ 缺点 |
|---|---|
样式隔离，告别类名冲突 |
样式和逻辑分离，查看时需要切文件 |
保留传统 CSS 写法，上手容易 |
打包时可能包含没用到的样式，略有浪费 |
CRA 中开箱即用 |
组件多时 CSS 文件多，结构稍繁琐 |
🎨 CSS-in-JS：样式不再漂泊，直接写在 JS 里！
CSS-in-JS 是什么？
用 JavaScript 的方式写 CSS！
不用跳文件，不用记类名，全靠组件内部管理
代表库：Emotion、styled-components
这期我们聚焦 Emotion，它灵活、高性能，社区支持度也很高。
✨ Emotion 入门：css 属性 + 模板字符串
要点如下：
在组件顶部加注释：
/** @jsxImportSource @emotion/react */使用 Emotion 提供的
css函数：
import { css } from '@emotion/react';
<span
css={css`
font-weight: bold;
color: blue;
`}
>
Emotion 来咯！
</span>✅ 语法像写 CSS，又能用变量、函数，写起来很香！
🔁 Emotion 最大的魔法：动态样式
想根据 props 改变颜色？一句话搞定！
<div
css={css`
color: ${isWarning ? "#e7650f" : "#118da0"};
background: ${isWarning ? "#f3e8da" : "#dcf1f3"};
`}
>
动态样式安排！
</div>💡 样式里用 ${} 嵌 JS 变量，配合状态管理，组件随心换“衣服”！
🔄 Emotion 样式是怎么生效的？
跟 CSS Modules 的构建时不同，Emotion 是运行时生成样式：
运行时解析模板字符串
动态生成带作用域的 class
自动挂载进 HTML
<style>中
🚧 注意：Emotion 需要你手动安装依赖：
npm install @emotion/react⚖️ Emotion 的优缺点速查
✨ 优点 |
⚠️ 缺点 |
|---|---|
支持 JS 逻辑、状态驱动样式 |
运行时生成样式，有轻微性能消耗 |
样式与组件贴近，阅读维护更方便 |
初学者不太习惯在 JS 中写 CSS |
无样式冲突问题，作用域自动隔离 |
样式混入 JS 文件，可能让组件体积变大 |
🧠 总结：CSS Modules vs Emotion
维度 |
CSS Modules |
Emotion (CSS-in-JS) |
|---|---|---|
样式作用域 |
构建时隔离 |
运行时生成独立类名 |
写法风格 |
标准 CSS 文件分离写法 |
样式和组件代码共存 |
动态能力 |
弱，需要配合类名逻辑处理 |
强，样式中直接嵌 JS 表达式 |
上手门槛 |
低，类似传统 CSS 开发 |
稍高，需要熟悉 JS + 模板字符串写法 |
性能 |
构建时生成，无运行时开销 |
运行时处理，有一定性能成本 |
🎯 选择建议：
偏向样式分离：👉 选择 CSS Modules
偏向逻辑融合、组件高度内聚：👉 Emotion 更合适！
如果你觉得今天的内容实用，欢迎点赞、收藏、转发，🎧！
#React #React播客 #前端达人 #前端播客 #CSS