15、React 组件样式美化与服务器端渲染全解析

React 组件样式美化与服务器端渲染全解析

1. CSS 模块与原子 CSS 模块

在 React 开发中，让组件美观是一个重要的任务。CSS 模块为我们提供了一种有效的方式来管理样式。CSS 模块的类名具有唯一性，这有助于隔离样式，避免全局样式冲突。

原子 CSS 是一种特殊的 CSS 使用方式，每个类只有一条规则。例如：

.mb0 {
  margin-bottom: 0;
}
.fw6 {
  font-weight: 600;
}

我们可以将这些原子类应用到元素上：

<h2 class="mb0 fw6">Hello React</h2>

原子 CSS 技术具有争议性，它虽然能让原型开发变得非常快，并且可以控制 CSS 文件的大小，但也存在一些问题。由于在标记中会有过多的类名，使得难以预测最终结果，并且将样式逻辑从 CSS 转移到了标记中。

为了解决原子 CSS 的问题，我们可以使用 CSS 模块，这种技术被称为原子 CSS 模块。我们首先创建基础的 CSS 类，然后使用 CSS 模块将它们组合成占位符类。例如：

.title {
  composes: mb0 fw6;
}

在组件中使用：

<h2 className={st