React✍️ 深入样式方案 [ ricepudding ]

方案概览

React 的样式方案较多，在应用开发初期，开发者需要根据项目业务具体情况选择对应样式方案；React 样式方案主要有：

内联样式：简单直观，适合动态样式和小型项目，但复用性差，功能有限；

module css：提供局部作用域，支持所有 CSS 功能，适合中大型项目，但配置复杂；

css in js：组件化样式，动态生成样式，功能强大，适合大型项目，但性能开销和学习成本较高；

tailwindcss：实用优先，快速开发 UI，适合所有项目，但类名冗长，灵活性受限；

内联样式

通过 style 属性直接在组件中定义样式；

优势

简单直观：直接在 JSX 中定义样式，容易理解和使用；
避免全局命名冲突：因为样式是局部的，不会与其他组件的样式冲突；
动态样式：可以方便地使用 JavaScript 表达式动态生成样式；

缺点

样式复用差：无法轻易复用样式，导致样式代码重复；
缺乏伪类和伪元素支持：无法使用 :hover、:active 等伪类和伪元素；
CSS 功能有限：许多 CSS 功能 （如媒体查询、关键帧动画等） 不能使用；

示例

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray'
};

function StyledComponent() {
  return <div style={divStyle}>Hello, world!</div>;
}

CSS Modules

CSS 模块允许为 CSS 类名添加局部作用域，避免样式冲突；

文件名通常以 .module.css 结尾；

优势

局部作用域：每个模块的 CSS 都是局部的，不会全局污染；
复用性好：可以在不同组件中导入相同的样式文件，复用性强；
支持所有 CSS 功能：可以使用所有 CSS 功能，包括媒体查询、伪类和伪元素；

缺点

配置复杂：需要通过构建工具 （如 Webpack） 进行配置；
样式依赖文件系统：样式存储在独立的文件中，可能影响开发体验；

示例

/* styles.module.css */
.container {
  color: red;
}

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

function StyledComponent() {
  return <div className={styles.container}>Hello, world!</div>;
}

CSS-in-JS

CSS-in-JS 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义；
目前比较流行的 CSS-in-JS 的库：
1. styled-components
2. emotion
3. glamorous
4. …

优势

组件化样式：样式与组件逻辑紧密结合，提升了组件的可维护性；
动态样式：支持通过 props 或 state 动态生成样式；
避免全局冲突：生成唯一的 className，避免样式冲突；
丰富的功能：支持嵌套、伪类、媒体查询等高级 CSS 功能；

缺点

性能开销：在运行时生成样式，可能会增加性能开销，特别是在大量组件中使用时；
学习成本：需要学习特定的库和语法；
打包体积：可能增加打包后的 JavaScript 体积；
SSR：支持较困难；

Styled Components

使用 styled-components 库可以在 JavaScript 中编写实际的 CSS，提供了组件级别的样式管理；

示例：

import { createRoot } from "react-dom/client";
import styled from 'styled-components';

const StyledButton = styled.button`
  padding: 12px 24px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;

  &:hover {
    background-color: #2563eb;
  }

  &:active {
    transform: scale(0.98);
  }
`;

function App() {
  return <StyledButton>Click Me</StyledButton>;
}

createRoot(document.getElementById("root")).render(<App />);

emotion

Emotion 是一个强大的 CSS-in-JS 库，提供了灵活的样式管理方案；

示例：

import { createRoot } from "react-dom/client";
import styled from "@emotion/styled";

const StyledButton = styled.button`
      padding: 12px 24px;
      background-color: #3b82f6;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;

      &:hover {
        background-color: #2563eb;
      }

      &:active {
        transform: scale(0.98);
      }
    `;

function App() {
  return <StyledButton>Click Me</StyledButton>;
}

createRoot(document.getElementById("root")).render(<App />);

tailwindcss

Tailwind CSS 是一个实用优先 (utility-first) 的 CSS 框架，与传统的 UI 框架 （如 Bootstrap） 有根本性不同；

它提供了一套低级别的实用类 (utility classes)，让开发者可以直接在 HTML/JSX 中快速构建定制化设计；

核心特点

提供原子化的 CSS 类，每个类通常只对应一个 CSS 属性；
```
<div class="p-4 bg-blue-500 text-white rounded-lg"></div>
```

内置响应式前缀系统；

<div class="text-sm md:text-base lg:text-lg"></div>

(Just-In-Time) 按需生成样式，极大减少文件体积；

优势

开发速度：快速原型设计和迭代；
一致性：强制执行设计系统规范；
灵活性：不受预制组件限制；
性能：生产环境下 CSS 极小；
维护性：样式与标记共存，无需在文件间跳转；

局限

学习曲线：需记忆大量实用类；
设计能力依赖：需要良好的 CSS 基础；
初期设置：配置较复杂；
标记膨胀：HTML/JSX 中类名可能很长；

打赏作者

您的打赏是我前进的动力

微信

支付宝

React✍️ React Hooks 深入理解

React✍️ Hook---

你好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. 方案概览
2. 内联样式
3. CSS Modules
4. CSS-in-JS
5. tailwindcss