您好，我是沧沧凉凉，是一名前端开发者，目前在掘金、知乎以及个人博客上同步发表一些学习前端时遇到的趣事和知识，欢迎关注。

---

上一篇文章说了一些styled-components的基础用法，但是我在看官方文档的时候，其实它是提供了非常多的高级用法的，只是我以前没有仔细阅读过文章，所以并不知道，为了本篇文章我才去仔细去看了一下官方文档，下面来所一下它的一些高级用法。

Theming

相当于一个全局主题样式，可以在任意的styled-components组件里面使用。

Theming函数

withTheme

如果你想要在除了styled-components组件之外使用Theming中的变量，那么你可以使用withTheme，如下所示：

v4+版本：

v5+版本：

as属性

我个人是不太推荐使用这个属性，因为它隐式改变了组件的样式，可能会给后期维护造成一定意义上的麻烦，可见下面代码：

$属性

如果你

css属性

createGlobalStyle

StyleSheetManager

styled-theming

如果你要创建样式组件，那么使用styled-theming是一个很不错的选择，它可以

最后

浏览了一遍官方文档，官方给出的例子和API非常详细，这里只是演示了一部分，我省略了官方提供的一部分测试API以及SSR的处理，因为就目前来说，这两部分我自己是用不到的。