{"id":16428108,"url":"https://github.com/wangshijun/course-styled-components-fundamentals","last_synced_at":"2025-03-21T04:30:53.760Z","repository":{"id":145468123,"uuid":"106994607","full_name":"wangshijun/course-styled-components-fundamentals","owner":"wangshijun","description":":fire: Source code for course \"styled-components fundamentals\"","archived":false,"fork":false,"pushed_at":"2017-11-10T09:20:02.000Z","size":4053,"stargazers_count":39,"open_issues_count":11,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-01T02:41:21.863Z","etag":null,"topics":["course","css","feweekly","javascript","react","react-native","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wangshijun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-15T08:09:03.000Z","updated_at":"2020-06-12T06:41:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"a3d3267d-6b69-4a6a-871c-e29c1fc9ae1c","html_url":"https://github.com/wangshijun/course-styled-components-fundamentals","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangshijun%2Fcourse-styled-components-fundamentals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangshijun%2Fcourse-styled-components-fundamentals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangshijun%2Fcourse-styled-components-fundamentals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangshijun%2Fcourse-styled-components-fundamentals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wangshijun","download_url":"https://codeload.github.com/wangshijun/course-styled-components-fundamentals/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244109487,"owners_count":20399559,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["course","css","feweekly","javascript","react","react-native","styled-components"],"created_at":"2024-10-11T08:15:08.034Z","updated_at":"2025-03-21T04:30:53.754Z","avatar_url":"https://github.com/wangshijun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 组件化必杀技：`styled-components` 简明教程\n\n## 课程介绍\n\n通过将 ES6 中的模板字符串（`template literals`）特性创造性的运用到 CSS 编码上，`styled-components` 成了前端社区现象级的 `CSS-IN-JS` 解决方案，能让我们在不用担心样式和组件之间如何关联的情况下用 CSS 书写组件，让样式组件真正成为开发的基本单元。\n\n那么，如何在 `React/React Native` 项目中使用 `styled-components`？如何改造现有项目？如何提高代码复用度和适应变化的能力？**共 8 小节，23 分钟**，本视频教程将为你打开 `styled-components` 的大门，让你熟知 `styled-components` 的主要特性，视频演示用的源码将会放在 Github 上供你调试。\n\n## 适用人群\n\n* [必须]具备前端基础知识，了解 ES6；\n* [必须]具备 React 基础知识，有开发经验更好；\n* [可选]期望跟上社区发展动态，学习最新的开发技术，如果满足这点，前两点可忽略；\n* [可选]具备 React Native 基础知识，有开发经验的更好；\n\n## 内容目录\n\n### 1. 用 `styled-components` 编写简单的 `React` 组件\n\n实例演示使用 `styled-components` 编写 `React` 组件基本步骤和语法，把要基于 `classNames` 才能实现的样式关联去掉，用纯 CSS 的方式去书写 `React` 组件。\n\n[![](./assets/01-replace-basic-presentation-components.png)](https://v.qq.com/iframe/player.html?vid=o1327y4isjw\u0026width=660\u0026height=371.25\u0026auto=0)\n\n### 2. 用 `props` 调整组件样式，真正发挥 `JS` 的威力\n\n使用 `styled-components` 编写组件的时候，可以在模板字符串中传入函数，或者表达式，这样就可以根据传给组件的 props 来调整组件的样式，让你真正体会到 `CSS-IN-JS` 的乐趣和威力。\n\n[![](./assets/02-adapting-style-using-props.png)](https://v.qq.com/iframe/player.html?vid=h13274ia83v\u0026width=660\u0026height=371.25\u0026auto=0)\n\n### 3. 用 `attrs` 封装组件属性，提高代码复用\n\n年年岁岁花相似，岁岁年年人不同，编写代码同样会有这样的问题，使用 `attrs` 机制不仅让我们在组件中封装样式，也能封装属性，极大的提高代码复用。\n\n[![](./assets/03-acheive-code-reuse-with-additional-props.png)](https://v.qq.com/iframe/player.html?vid=c13275ibr7i\u0026width=660\u0026height=371.25\u0026auto=0)\n\n### 4. 用 `extend` 创建组件变种，实现样式继承\n\n用 `JS` 书写样式就失去了继承的能力？使用 `styled-components` 提供的 `extend` 机制，让我们找回这种能力，单重继承？多重继承？随你所需。\n\n[![](./assets/04-using-extend-to-reuse-style.png)](https://v.qq.com/iframe/player.html?vid=d1327mc5tb4\u0026width=660\u0026height=371.25\u0026auto=0)\n\n### 5. 用 `injectGlobal` 设置全局样式\n\n组件化之后怎么设置 `body` 样式？因为 `body` 是无论如何不能被写成一个组件的，好在 `styled-components` 给我们提供了 `injectGlobal` 辅助函数来设置页面的全局样式。\n\n[![](./assets/05-use-injectglobal-for-global-styling.png)](https://v.qq.com/iframe/player.html?vid=s1327kq80qu\u0026width=660\u0026height=371.25\u0026auto=0)\n\n### 6. 用 `ThemeProvider` 实现主题功能\n\n把应用中常用的字体、颜色、尺寸集中起来管理能极大提高代码适应变化的能力，这种功能或设计可以常被称为\"主题\"（亦可称皮肤）的\"作用\"，实例演示 `styled-components` 的主题机制。\n\n[![](./assets/06-using-theme-provider-for-config.png)](https://v.qq.com/iframe/player.html?vid=o1327ra0tf1\u0026width=660\u0026height=371.25\u0026auto=0)\n\n### 7. 用 `keyframes` 实现界面动画\n\n恰到好处的动画能让用户对你的应用爱不释手，`styled-components` 提供的 `keyframes` 辅助函数能够让我们很容易的把 `CSS` 里面的动画迁移到组件中。\n\n[![](./assets/07-using-keyframes-for-animation.png)](https://v.qq.com/iframe/player.html?vid=x13273bxic5\u0026width=660\u0026height=371.25\u0026auto=0)\n\n### 8. 在 `React Native` 中使用 `styled-components`\n\n`styled-components` 也为 `React Native` 提供了很好的支持，哪些地方是完全相同的？哪些地方需要你注意？本节视频为你解惑。\n\n[![](./assets/08-using-styled-components-in-react-native.png)](https://v.qq.com/iframe/player.html?vid=i1327nx3fco\u0026width=660\u0026height=371.25\u0026auto=0)\n\n## 源码链接\n\n代码仓库：[wangshijun/course-styled-components-fundamentals](https://github.com/wangshijun/course-styled-components-fundamentals)\n\n运行方法（建议安装和使用 [yarn](https://yarnpkg.com/en/)）\n\n```shell\ngit clone https://github.com/wangshijun/course-styled-components-fundamentals.git\ncd course-styled-components-fundamentals\nyarn\nyarn start\n\n# react-native 代码的运行直接参照 react-native 官网文档即可\n```\n\n要运行每节课的代码，只需要将仓库 `checkout` 下面对应的版本。\n\n1. [用 `styled-components` 编写简单的 `React` 组件](https://github.com/wangshijun/course-styled-components-fundamentals/commit/f0a8891339305a513fbcc20481c79e1dd5e1aad8)\n1. [用 `props` 调整组件样式，真正发挥 `JS` 的威力](https://github.com/wangshijun/course-styled-components-fundamentals/commit/7abd6a4a69d8175ddd7f9a7ca78e4e857f1e5ce2)\n1. [用 `attrs` 封装组件属性，提高代码复用](https://github.com/wangshijun/course-styled-components-fundamentals/commit/0155754871ca2b20eb8f7e06898367e0b64ef7f9)\n1. [用 `extend` 创建组件变种，实现样式继承](https://github.com/wangshijun/course-styled-components-fundamentals/commit/e0b7741188e72dec976b0508d006d75097c62b8d)\n1. [用 `injectGlobal` 设置全局样式](https://github.com/wangshijun/course-styled-components-fundamentals/commit/5c3d55bee67b074d775b82f631faa0b617fed7e6)\n1. [用 `ThemeProvider` 实现主题功能](https://github.com/wangshijun/course-styled-components-fundamentals/commit/e4ae93446f3fddb689828563bb4ae3d9344db395)\n1. [用 `keyframes` 实现界面动画](https://github.com/wangshijun/course-styled-components-fundamentals/commit/85c56ec1b05c70defbb9f0e4aa3d1e8fa7da1a44)\n1. [在 `React Native` 中使用 `styled-components`](https://github.com/wangshijun/course-styled-components-fundamentals/commit/2ba53f047a81cf31390156e9a5418019bf0c3386)\n\n## 运行环境\n\n* Node.js v8.6.0\n* React v16\n* React Native v0.49.0\n* VSCode v1.17.1 + Vim\n* Chrome v61\n\n## 参考资料\n\n* [styled-components docs](https://www.styled-components.com/docs)\n\n## 视频地址\n\n关注《前端周刊》微信公众号，回复 `course-styled-components` 后获取高清视频教程下载地址。\n\n![cover.png](./assets/cover.png)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangshijun%2Fcourse-styled-components-fundamentals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwangshijun%2Fcourse-styled-components-fundamentals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangshijun%2Fcourse-styled-components-fundamentals/lists"}