React 播客专栏 Vol.12｜告别样式混乱！两种方式让你的 React 样式更专业

👋 欢迎回到《前端达人 · React 播客书单》第 12 期（正文内容为学习笔记摘要，音频内容是详细的解读，方便你理解），请点击下方收听

写了那么多组件，是不是也想让它们“好看起来”？今天我们带你用两种新方式，告别样式混乱，一步步走上前端组件化样式的正道！

✅ 今日学习目标一览

📌 本期聚焦：

• 解决 Plain CSS 带来的样式冲突问题
• 学会使用 CSS Modules 实现组件级样式隔离
• 初步掌握 CSS-in-JS，体验 Emotion 的动态样式魅力

🧩 Plain CSS 为何不够用？

Plain CSS 就像“群发短信”，谁都能收到，但没人知道到底发给谁。

• 所有样式默认是全局的
• 类名一重复，样式就出事

于是，我们需要 “局部样式” 的能力，让每个组件都穿上“独立制服”。

🔐 CSS Modules：给每个组件一个独立小空间

CSS Modules 是什么？

• 一种可以给每个组件自动生成唯一类名的技术
• 样式不会全局污染，安全感 MAX！

✅ 只需给文件起名为 .module.css，CRA 项目中就能直接用，不需配置。

✍️ CSS Modules 怎么用？

1. 创建样式文件（文件名要叫 xxx.module.css）：

/* Alert.module.css */
.container { padding: 12px; }
.warning { background-color: yellow; }

1. 在组件中导入样式：

import styles from './Alert.module.css';

1. 使用 className 引用：

<div className={`${styles.container} ${styles.warning}`}>
  Hello World
</div>

✅ 类名实际会被变成一串 hash，彻底杜绝重复！

📊 CSS Modules 有啥优缺点？

🎨 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 的优缺点速查

🧠 总结：CSS Modules vs Emotion

🎯 选择建议：

• 偏向样式分离：👉 选择 CSS Modules
• 偏向逻辑融合、组件高度内聚：👉 Emotion 更合适！

#React #React播客 #前端达人 #前端播客 #CSS