styled-components：组件化样式写法

什么是 styled-components

styled-components 是一个流行的 CSS-in-JS 库，它让你可以直接在 JavaScript 文件中编写真实的 CSS 代码来给组件添加样式。它通过 ES6 的标签模板字面量（Tagged Template Literals）语法，将样式与组件绑定在一起，形成一个真正意义上的“样式组件”。

核心思想是：样式就是组件，组件自带样式。你不再需要单独维护 CSS 文件，不用纠结类名的命名冲突，每个组件的样式都是私有的、隔离的，随组件一起复用和销毁。

为什么选择 styled-components

传统的 CSS 方案往往面临这些问题：

全局命名冲突：不同文件的类名可能互相覆盖。
样式冗余：不知道哪些样式已经不再被使用，不敢删除。
依赖关系不清晰：很难一眼看出某个组件依赖了哪些样式。

styled-components 解决了这些痛点：

自动生成唯一类名，永无冲突。
样式与组件共存亡，组件不用了，样式也自动删除。
利用 JavaScript 能力，样式可以基于 Props 动态变化，灵活度远超静态 CSS。

安装与基本使用

npm install styled-components

创建一个最简单的样式化组件：

import styled from 'styled-components';

// 创建一个带有样式的 button 元素
const Button = styled.button`
  background-color: #3b82f6;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;

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

function App() {
  return <Button>点击我</Button>;
}

styled.button 会返回一个 React 组件，可以直接像普通组件一样使用。& 代表当前组件，支持 SCSS 风格的嵌套语法如 &:hover、&::before 等。

基于 Props 的动态样式

styled-components 的核心优势之一是可以根据组件的 Props 动态调整样式，这是传统 CSS 很难做到的。

const Button = styled.button`
  background-color: ${props => props.primary ? '#3b82f6' : '#e5e7eb'};
  color: ${props => props.primary ? 'white' : '#374151'};
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: ${props => props.size === 'large' ? '18px' : '14px'};
  cursor: pointer;
`;

function App() {
  return (
    <div>
      <Button primary>主要按钮</Button>
      <Button>次要按钮</Button>
      <Button primary size="large">大号主要按钮</Button>
    </div>
  );
}

在样式字符串中，你可以插入一个函数，该函数接收组件的 props 作为参数，返回对应的样式值。这使得按钮的变体（variant）定义变得异常简洁。

扩展已有样式

当你需要基于已有样式创建变体时，可以使用 styled() 方法继承样式：

const PrimaryButton = styled(Button)`
  background-color: #3b82f6;
  color: white;

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

PrimaryButton 继承了 Button 的所有样式，并可以添加或覆盖特定的规则。这避免了样式重复，也符合 DRY 原则。

添加额外的 Props 或属性

有时候你需要给样式组件传递额外的 HTML 属性（如 type="submit"），或使用 as 属性来改变渲染的底层标签：

<Button as="a" href="/login">跳转到登录页</Button>
<Button type="submit">提交表单</Button>

as 属性让同一个样式组件可以渲染为不同的 HTML 元素，非常灵活。

全局样式与主题

styled-components 提供了 createGlobalStyle 来定义全局样式，以及 ThemeProvider 来实现主题化统一管理。

全局样式：

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  *, *::before, *::after {
    box-sizing: border-box;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <Main />
    </>
  );
}

主题化：

import { ThemeProvider } from 'styled-components';

// 定义主题对象
const theme = {
  primary: '#3b82f6',
  secondary: '#10b981',
  danger: '#ef4444',
  spacing: {
    small: '8px',
    medium: '16px',
    large: '24px',
  },
};

// 在样式中通过 props.theme 访问主题
const Button = styled.button`
  background-color: ${props => props.theme.primary};
  padding: ${props => props.theme.spacing.small} ${props => props.theme.spacing.medium};
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>主题色按钮</Button>
    </ThemeProvider>
  );
}

这种模式非常适合统一管理设计系统中的色彩、间距、字体等变量，当需要切换暗色模式或品牌配色时，只需替换主题对象即可。

实际开发中的注意事项

1. 不要在 render 中动态创建样式组件

❌ 错误做法：

function App({ color }) {
  const DynamicButton = styled.button`
    background-color: ${color};
  `;
  return <DynamicButton />;
}

每次 App 渲染都会创建新的组件，导致性能问题（React 会频繁卸载和挂载组件）。

✅ 正确做法：组件定义在模块顶层，通过 Props 控制样式即可。

2. 样式组件命名规范

建议使用语义化的大写驼峰名称，如 PrimaryButton、StyledHeader，以便在 React DevTools 中一眼识别组件类型。

3. 与 TypeScript 配合

styled-components 对 TypeScript 的支持良好，可以为 Props 添加类型约束：

interface ButtonProps {
  primary?: boolean;
}

const Button = styled.button<ButtonProps>`
  background-color: ${props => props.primary ? '#3b82f6' : '#e5e7eb'};
`;

总结

styled-components 将样式提升为 React 组件的一等公民，真正实现了“样式即组件”。它的 Props 驱动样式、样式继承、主题管理等特性，让样式开发更加模块化、动态化和可维护化。在团队协作中，它能有效避免样式冲突，并与组件化开发思维完美契合。如果你正在构建一个组件库或有大量动态样式的需求，styled-components 是极佳的选择。