Styled-components 和 Emotion

在 React 中，Styled-components 和 Emotion 是两种流行的 CSS-in-JS 解决方案，它们允许开发者在 JavaScript 中定义和管理组件样式。这些库通过将 CSS 和 JavaScript 紧密结合，提供了一种更强大、更灵活的方式来编写样式，尤其适用于组件化开发。它们可以提升样式的可维护性、可组合性，并且支持动态样式。

本章将介绍 Styled-components 和 Emotion 的概念、使用方式、优缺点，以及它们的应用场景。

1. Styled-components

Styled-components 是一个非常流行的 CSS-in-JS 库，它允许开发者使用 JavaScript 直接写 CSS 样式，并将这些样式与 React 组件绑定。Styled-components 使用 模板字符串（Template Literals） 语法来定义样式，并将其应用到组件上。

1.1 Styled-components 的基本概念

Styled-components 基于 JavaScript 的模板字符串，将样式作为字符串传递给 styled 函数，通过动态生成类名来实现样式的注入。每个样式都是针对单一组件的，它们通过 React 组件的方式进行渲染。

1.2 如何使用 Styled-components

1. 安装 Styled-components：

npm install styled-components

2. 创建并使用样式化组件：

import React from 'react';
import styled from 'styled-components';

// 使用模板字符串创建一个 styled 组件
const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;

  &:hover {
    background-color: darkblue;
  }
`;

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

export default App;

说明：

• styled.button 是一个由 styled-components 提供的 API，它会创建一个 Button 组件，并将样式应用到该组件。
• 样式可以直接写在 JavaScript 文件中，不需要单独的 CSS 文件。

1.3 动态样式

Styled-components 支持动态样式，可以根据组件的 props 来改变样式。

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
`;

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

说明：

通过 props 动态控制按钮的背景颜色，当 primary 为 true 时，背景颜色为 blue，否则为 gray。

1.4 优势与应用场景

• 样式与组件绑定：样式与组件紧密绑定，增强了组件的可维护性和复用性。
• 动态样式：通过 props 可以轻松实现样式的动态变化。
• 避免类名冲突：Styled-components 自动生成独一无二的类名，避免了全局 CSS 样式的冲突。
• 主题支持：Styled-components 支持主题功能，可以在全应用中管理一致的样式和配色方案。
• 适用场景：适用于需要紧密集成样式和组件的 React 应用，尤其是组件化开发中。

2. Emotion

Emotion 是另一个流行的 CSS-in-JS 库，提供了一些与 Styled-components 相似的功能，同时也提供了更多的优化和灵活性。Emotion 提供了两种使用方式：通过 styled API 和 css API。

2.1 Emotion 的基本概念

Emotion 提供了强大的性能优化和灵活的 API。它支持模板字符串和对象样式语法，并且可以与 Styled-components 类似地使用，也支持通过 css 属性将样式作为对象传递。

2.2 如何使用 Emotion

1. 安装 Emotion：

npm install @emotion/react @emotion/styled

2. 使用 styled API 创建组件：

/** @jsxImportSource @emotion/react */
import React from 'react';
import styled from '@emotion/styled';

// 使用 styled 创建组件
const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  
  &:hover {
    background-color: darkblue;
  }
`;

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

export default App;

说明：

• Emotion 的 styled API 与 Styled-components 非常相似。
• @jsxImportSource @emotion/react 让你可以使用 Emotion 的 JSX 转换功能。

2.3 使用 css 属性创建样式

Emotion 还提供了 css API，它可以让你直接通过样式对象来定义样式，并将样式应用到组件中。

/** @jsxImportSource @emotion/react */
import React from 'react';
import { css } from '@emotion/react';

function App() {
  return (
    <div>
      <button
        css={css`
          background-color: blue;
          color: white;
          padding: 10px 20px;
          border-radius: 5px;

          &:hover {
            background-color: darkblue;
          }
        `}
      >
        Click Me
      </button>
    </div>
  );
}

export default App;

说明：

使用 css 函数传递样式对象，动态应用样式。

2.4 优势与应用场景

• 性能优化：Emotion 内部优化了样式的注入和缓存，能提供更好的性能，尤其是在大规模应用中。
• 灵活的 API：支持多种定义样式的方式，包括模板字符串和样式对象，开发者可以根据项目需求灵活选择。
• 高度集成：Emotion 可以与 React 和其他库无缝集成，特别适合与 TypeScript 等工具一起使用。
• 适用场景：适合需要灵活和高性能样式管理的应用，尤其在开发大型和高复杂度项目时。

3. Styled-components 与 Emotion 的对比

4. 小结

• Styled-components 提供了一种简单且直观的方式来将样式与组件绑定，适合中小型项目。它的 API 易于使用，适合大部分开发者。
• Emotion 提供了更灵活和高性能的 API，适合大型和高性能要求的应用。它的多样化 API 使得开发者可以灵活选择样式定义方式，适应不同的开发需求。

根据项目的规模和复杂度，可以选择适合的 CSS-in-JS 解决方案。对于小型应用，Styled-components 非常合适；而对于大型应用或性能要求较高的项目，Emotion 则是一个更好的选择。