工具生态 #

一、VS Code 插件 #

1.1 vscode-styled-components #

最常用的 VS Code 插件，提供语法高亮和智能提示：

安装方法：

  1. 打开 VS Code
  2. 按 Cmd+Shift+X 打开扩展面板
  3. 搜索 “styled-components”
  4. 安装 “vscode-styled-components”

功能特性：

text 
vscode-styled-components 功能
├── 语法高亮
│   ├── CSS 属性高亮
│   ├── 选择器高亮
│   └── 值高亮
│
├── 智能提示
│   ├── CSS 属性补全
│   ├── CSS 值补全
│   └── Emmet 支持
│
├── 错误检查
│   ├── 语法错误
│   └── 属性拼写检查
│
└── 格式化
    ├── 自动缩进
    └── 代码格式化

1.2 VS Code 配置 #

json 
{
  "editor.syntaxHighlight": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  "css.validate": false,
  "styled-components.tags": [
    "styled",
    "css",
    "createGlobalStyle",
    "keyframes"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

1.3 其他推荐插件 #

text 
推荐 VS Code 插件
├── ES7+ React/Redux/React-Native snippets
│   └── React 代码片段
│
├── Prettier - Code formatter
│   └── 代码格式化
│
├── ESLint
│   └── 代码检查
│
└── Auto Rename Tag
    └── 自动重命名标签

二、Babel 插件 #

2.1 babel-plugin-styled-components #

安装：

bash 
npm install --save-dev babel-plugin-styled-components

配置 .babelrc：

json 
{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": true,
        "ssr": true,
        "transpileTemplateLiterals": true,
        "minify": false,
        "pure": false,
        "namespace": ""
      }
    ]
  ]
}

2.2 插件选项说明 #

选项 默认值 说明
displayName true 添加组件名到类名
ssr true 启用 SSR 支持
transpileTemplateLiterals true 转译模板字面量
minify false 压缩样式
pure false 标记为纯函数
namespace ‘’ 类名命名空间

2.3 开发与生产配置 #

json 
{
  "env": {
    "development": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          {
            "displayName": true,
            "ssr": false,
            "minify": false
          }
        ]
      ]
    },
    "production": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          {
            "displayName": false,
            "ssr": true,
            "minify": true,
            "pure": true
          }
        ]
      ]
    }
  }
}

2.4 效果对比 #

无插件：

html 
<button class="sc-aXZVg iZNUXn">Click</button>

有插件（displayName: true）：

html 
<button class="Button__Button-sc-aXZVg iZNUXn">Click</button>

三、ESLint 插件 #

3.1 eslint-plugin-styled-components-a11y #

安装：

bash 
npm install --save-dev eslint-plugin-styled-components-a11y

配置 .eslintrc：

json 
{
  "plugins": ["styled-components-a11y"],
  "rules": {
    "styled-components-a11y/alt-text": "error",
    "styled-components-a11y/click-events-have-key-events": "warn",
    "styled-components-a11y/no-noninteractive-element-interactions": "warn"
  }
}

3.2 可用规则 #

text 
ESLint 规则
├── alt-text
│   └── 图片必须有 alt 属性
│
├── click-events-have-key-events
│   └── 点击事件需要键盘事件
│
├── no-noninteractive-element-interactions
│   └── 非交互元素不应有交互事件
│
└── role-supports-aria-props
    └── role 必须支持对应的 aria 属性

四、测试工具 #

4.1 jest-styled-components #

安装：

bash 
npm install --save-dev jest-styled-components

配置 jest.setup.js：

javascript 
import 'jest-styled-components';

使用示例：

tsx 
import { render, screen } from '@testing-library/react';
import styled from 'styled-components';
import 'jest-styled-components';

const Button = styled.button`
  padding: 12px 24px;
  background: #667eea;
  color: white;
  
  &:hover {
    background: #5a6fd6;
  }
`;

describe('Button', () => {
  it('has correct styles', () => {
    render(<Button>Click</Button>);
    
    const button = screen.getByRole('button');
    
    expect(button).toHaveStyleRule('padding', '12px 24px');
    expect(button).toHaveStyleRule('background', '#667eea');
    expect(button).toHaveStyleRule('background', '#5a6fd6', {
      modifier: ':hover',
    });
  });
});

4.2 匹配器 #

text 
jest-styled-components 匹配器
├── toHaveStyleRule
│   └── 检查 CSS 规则
│
├── toHaveStyleRule (with modifier)
│   └── 检查伪类/伪元素
│
└── toHaveStyleRule (with media)
    └── 检查媒体查询

五、调试工具 #

5.1 React DevTools #

Styled Components 与 React DevTools 完美集成：

text 
React DevTools 显示
├── 组件名称
│   └── styled.button → Button
│
├── Props
│   ├── $variant: "primary"
│   └── $size: "large"
│
└── Hooks
    └── useTheme

5.2 浏览器开发者工具 #

查看生成的样式：

html 
<head>
  <style data-styled="active" data-styled-version="6.0.0">
    .Button__Button-sc-aXZVg {
      padding: 12px 24px;
      background: #667eea;
    }
  </style>
</head>

检查元素：

html 
<button class="Button__Button-sc-aXZVg iZNUXn">
  Click me
</button>

5.3 样式调试技巧 #

jsx 
import styled from 'styled-components';

const Button = styled.button`
  padding: 12px 24px;
  background: #667eea;
  color: white;
  
  ${props => {
    console.log('Button props:', props);
    return props.$primary && `background: #667eea;`;
  }}
`;

六、构建工具集成 #

6.1 Vite 配置 #

javascript 
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              displayName: true,
              ssr: false,
            },
          ],
        ],
      },
    }),
  ],
});

6.2 Webpack 配置 #

javascript 
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [
              [
                'babel-plugin-styled-components',
                {
                  displayName: process.env.NODE_ENV !== 'production',
                },
              ],
            ],
          },
        },
      },
    ],
  },
};

6.3 Next.js 配置 #

javascript 
const nextConfig = {
  compiler: {
    styledComponents: true,
  },
};

module.exports = nextConfig;

七、代码格式化 #

7.1 Prettier 配置 #

安装：

bash 
npm install --save-dev prettier

.prettierrc：

json 
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "arrowParens": "always"
}

7.2 格式化示例 #

格式化前：

jsx 
const Button=styled.button`
padding:12px 24px;background:#667eea;
color:white;`;

格式化后：

jsx 
const Button = styled.button`
  padding: 12px 24px;
  background: #667eea;
  color: white;
`;

八、脚手架工具 #

8.1 create-react-app #

bash 
npx create-react-app my-app
cd my-app
npm install styled-components

8.2 Vite #

bash 
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install styled-components

8.3 Next.js #

bash 
npx create-next-app@latest my-app
cd my-app
npm install styled-components

九、社区工具 #

9.1 styled-theming #

bash 
npm install styled-theming
jsx 
import styled from 'styled-components';
import theme from 'styled-theming';

const backgroundColor = theme('mode', {
  light: '#ffffff',
  dark: '#111827',
});

const Box = styled.div`
  background: ${backgroundColor};
`;

9.2 styled-tools #

bash 
npm install styled-tools
jsx 
import styled from 'styled-components';
import { prop, ifProp, switchProp } from 'styled-tools';

const Button = styled.button`
  background: ${switchProp('variant', {
    primary: '#667eea',
    secondary: '#764ba2',
    default: '#e0e0e0',
  })};
  
  padding: ${ifProp('large', '16px 32px', '12px 24px')};
  color: ${prop('color', '#333')};
`;

9.3 polished #

bash 
npm install polished
jsx 
import styled from 'styled-components';
import { lighten, darken, transparentize } from 'polished';

const Button = styled.button`
  background: #667eea;
  
  &:hover {
    background: ${lighten(0.1, '#667eea')};
  }
  
  &:active {
    background: ${darken(0.1, '#667eea')};
  }
`;

const Overlay = styled.div`
  background: ${transparentize(0.5, '#000')};
`;

十、总结 #

工具生态要点速查表：

工具类型 推荐工具
VS Code 插件 vscode-styled-components
Babel 插件 babel-plugin-styled-components
ESLint 插件 eslint-plugin-styled-components-a11y
测试工具 jest-styled-components
调试工具 React DevTools
格式化 Prettier
工具库 polished, styled-tools

恭喜你完成了 Styled Components 完全指南的学习！

最后更新：2026-03-28