文档

利用标记模板字面量（JavaScript 的最新添加）和 CSS 的强大功能，styled-components 允许你编写实际的 CSS 代码来设置组件的样式。它还删除了组件和样式之间的映射 - 使用组件作为底层样式构造再简单不过了！

基础(Basics)

动机(Motivation)

安装(Installation)

入门(Getting Started)

根据属性进行调整(Adapting based on props)

扩展样式(Extending styles)

设计任何组件的样式(Styling any component)

传递的属性(Passed props)

来自 CSS(Coming from CSS)

附加额外属性(Attaching additional props)

动画(Animations)

React Native

高级(Advanced)

主题化(Theming)

引用(Refs)

安全(Security)

现有的 CSS(Existing CSS)

标记模板字面量(Tagged Template Literals)

服务器端渲染(Server Side Rendering)

引用其他组件(Referring to other components)

样式对象(Style Objects)

API 参考(API Reference)

基本(Primary)

辅助程序(Helpers)

测试实用工具(Test Utilities)

支持的 CSS(Supported CSS)

TypeScript

以前的 API(Previous APIs)

工具(Tooling)

Babel 插件(Babel Plugin)

SWC 插件(SWC Plugin)

Babel 宏(Babel Macro)

TypeScript 插件(TypeScript Plugin)

Jest 集成(Jest Integration)

Stylelint

风格主题(Styled Theming)

语法高亮(Syntax Highlighting)

常见问题(FAQs)

我需要做什么才能迁移到 v6？(What do I need to do to migrate to v6?)

我需要做什么才能迁移到 v5？(What do I need to do to migrate to v5?)

我需要做什么才能迁移到 v4？(What do I need to do to migrate to v4?)

我可以嵌套规则吗？(Can I nest rules?)

我可以使用 CSS 框架吗？(Can I use css frameworks?)

如何以更高的特异性覆盖样式？(How can I override styles with higher specificity?)

如何覆盖内联样式？(How can I override inline styles?)

为什么我的 DOM 节点有两个类？(Why do my DOM nodes have two classes?)

什么时候使用属性？(When to use attrs?)

为什么我应该避免在渲染方法中声明样式组件？(Why should I avoid declaring styled components in the render method?)

我是一名库作者。我应该将样式组件与我的库打包在一起吗？(I am a library author. Should I bundle styled-components with my library?)

为什么我会收到有关页面上多个模块实例的警告？(Why am I getting a warning about several instances of module on the page?)

为什么我会收到 HTML 属性警告？(Why am I getting HTML attribute warnings?)

支持哪些浏览器？(Which browsers are supported?)

如何将 styled-components 与 create-react-app 一起使用？(How do I use styled-components with create-react-app?)

如何解决使用 npm link 或 yarn link 时出现的问题？(How can I fix issues when using npm link or yarn link?)

如何修复服务器端渲染后闪烁的文本？(How do I fix flickering text after server side rendering?)

缺少 styled-components/native 的声明？(Missing Declarations for styled-components/native?)