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

课程简介

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

内容目录

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 封装组件属性，提高代码复用

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

5. 用 injectGlobal 设置全局样式

6. 用 ThemeProvider 实现主题功能

7. 用 keyframes 实现界面动画

8. 在 React Native 中使用 styled-components

运行环境

• Node.js v8.6.0

• React v16

• React Native v0.49.0

• VSCode v1.17.1 + Vim

• Chrome v61

参考资料

styled-components docs

视频下载

长按下图，识别二维码，关注《前端周刊》微信公众号，回复 course-styled-components 即可获取高清视频教程下载地址。

题外话

最后，可能你有同学会问，我为什么要做这个公开课？接下来的计划是什么？请阅读好久不见，我总感觉欠你点什么