可自由转载，课程视频会陆续放出，文末有高清视频下载方法。

课程简介

请阅读： 《组件化必杀技：styled-components 简明教程》课程预告

内容目录

7. 用 keyframes 实现界面动画

恰到好处的动画能让用户对你的应用爱不释手，styled-components 提供的 keyframes 辅助函数能够让我们很容易的把 CSS 里面的动画迁移到组件中。

6. 用 ThemeProvider 实现主题功能

把应用中常用的字体、颜色、尺寸集中起来管理能极大提高代码适应变化的能力，这种功能或设计可以常被称为”主题”（亦可称皮肤）的”作用”，实例演示 styled-components 的主题机制。

5. 用 injectGlobal 设置全局样式

组件化之后怎么设置 body 样式？因为 body 是无论如何不能被写成一个组件的，好在 styled-components 给我们提供了 injectGlobal 辅助函数来设置页面的全局样式。

4. 用 extend 创建组件变种，实现样式继承

用 JS 书写样式就失去了继承的能力？使用 styled-components 提供的 extend 机制，让我们找回这种能力，单重继承？多重继承？随你所需。 视频请猛击这里。

3. 用 attrs 封装组件属性，提高代码复用

年年岁岁花相似，岁岁年年人不同，编写代码同样会有这样的问题，使用 attrs 机制不仅让我们在组件中封装样式，也能封装属性，极大的提高代码复用。 视频请猛击这里。

2. 用 props 调整组件样式，真正发挥 JS 的威力

使用 styled-components 编写组件的时候，可以在模板字符串中传入函数，或者表达式，这样就可以根据传给组件的 props 来调整组件的样式，让你真正体会到 CSS-IN-JS 的乐趣和威力。 视频请猛击这里。

1. 用 styled-components 编写简单的 React 组件

实例演示使用 styled-components 编写 React 组件基本步骤和语法，把要基于 classNames 才能实现的样式关联去掉，用纯 CSS 的方式去书写 React 组件。 视频请猛击这里。

以下部分包含外链，请点击原文查看。

源码链接

代码仓库：wangshijun/course-styled-components-fundamentals

运行方法（建议安装和使用 yarn）

git clone https://github.com/wangshijun/course-styled-components-fundamentals.git
cd course-styled-components-fundamentals
yarn
yarn start

# react-native 代码的运行直接参照 react-native 官网文档即可

要运行每节课的代码，只需要将仓库 checkout 下面对应的版本。

1. 用 styled-components 编写简单的 React 组件

2. 用 props 调整组件样式，真正发挥 JS 的威力

3. 用 attrs 封装组件属性，提高代码复用