---

名称: styled-components 描述: Styled Components 主题化、变体、SSR 支持和模式。 允许的工具: Read, Write, Edit, Bash, Glob, Grep

Styled Components 技能

为 styled-components 的 CSS-in-JS 提供专家级协助。

能力

• 创建样式化组件
• 实现主题化
• 处理 SSR（服务端渲染）
• 创建变体
• 扩展组件

模式

import styled, { css } from 'styled-components';

const Button = styled.button<{ $variant?: 'primary' | 'secondary' }>`
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;

  ${({ $variant }) =>
    $variant === 'primary' &&
    css`
      background: ${({ theme }) => theme.colors.primary};
      color: white;
    `}
`;

// 主题化
const theme = {
  colors: { primary: '#3b82f6' },
};

<ThemeProvider theme={theme}>
  <Button $variant="primary">点击我</Button>
</ThemeProvider>

目标流程

• react-应用开发
• 主题化实现
• 组件库