生态系统

贡献

如果您知道任何使用 styled-components 构建的项目，欢迎您随时贡献和提出建议！请先阅读 贡献指南 并提交 PR。

使用 styled-components 构建

组件

• react-data-table-component
  • 带内置排序、分页、选择、可扩展行和可定制样式的数据表。
• oah-ui
  • 使用四个主题、网格系统、ltr 和 rtl 方向、主题系统添加和编辑主题构建的组件库。
• react-styled-floating-label
  • 浮动标签组件，适用于任何 HTML 输入。
• grape-ui
  • 使用 styled-system 和其他开源组件构建的组件库。
• styled-off-canvas
  • 简单的单次画布菜单。
• React95
  • Windows 95 风格的 UI 组件。
• react-functional-select
  • 微型且微优化选择组件。
• Grommet
  • 以可访问性、模块化、响应性和主题为设计理念构建的组件库。
• bootstrap-styled
  • Bootstrap 4 组件、混合器、实用程序实现，以全球共享社区生态系统为理念。
• react-epic-spinners
  • 用于微调器的可重复使用组件。
• styled-react-modal
  • 模态组件，带有熟悉的 API 和语法糖。
• Smooth UI
  • UI 库/设计系统。
• rendition
  • 一个强大的组件库，可用于快速构建现代 Web 应用程序。
• styled-icons
  • 来自流行图标包（Font Awesome、Material、Octicons 等）的图标。
• @hackclub/design-system
  • 灵活的、可重复使用的 Web UI 组件集，由 Hack Club 构建
• react-styled-select
  • 轻量级选择控件组件。
• react-microlink
  • 将您的链接转换为美丽的预览。
• ReaKit
  • 用于构建交互式 UI 的工具包。
• Rebass
  • 功能性 React UI 组件库。
• react-css-loaders
  • 纯 CSS 加载组件的集合。
• react-simple-chatbot
  • 简单的聊天机器人/对话式 UI 组件。
• reactour
  • 组件中的导游。
• uiGradients
  • 用于渐变的即用型组件。
• react-aria-tooltip
  • 可访问的 ReactJS 工具提示组件。
• grommet-icons
  • 用于 grommet 应用程序的图标库。

网格系统

• bedrock-layout-primitives
  • 您 React 应用程序的基础布局基元。
• Atomic Layout
  • 布局组合作为物理 React 组件。
• react-raster
  • 高级网格系统，高度可定制，适合 SSR。
• react-flex-ready
  • 带有 flex-gap 属性的 FlexBox 网格系统。
• Cinch Layout
  • 受 Hedron 启发的 React Native 网格系统。
• react-awesome-styled-grid
  • 响应式网格系统布局。
• styled-bootstrap-grid
  • Twitter Bootstrap v4（仅网格系统）。
• neat-components
  • ThoughtBot 的 Neat 网格系统的实现。
• styled-css-grid
  • 微型 CSS 网格布局。
• react-flexa
  • 以响应方式实现 flexbox CSS API。
• react-styled-flexboxgrid
  • 基于 flexbox 的网格系统。
• Hedron
  • 无装饰的 flex-box 网格系统。

帮助程序

• MetaComponent
  • 将遗留 HTML 和 CSS 迁移到 styled 组件。
• styco
  • VS Code 扩展，用于轻松地将 JSX 内联样式重构为 styled 组件。
• react-components-cli
  • 生成 styled 组件的客户端。
• theme-miner
  • 使在 React 中使用 styled-components 创建复杂的设计系统变得非常容易和可读。
• styless
  • 使用熟悉的 Less 语法以声明方式为您的组件设置样式。
• css-in-js-media
  • 处理响应式设计。
• spacing-helper
  • 用于在元素之间创建一致间距的独立帮助程序。
• styled-components-extractor
  • 在 VS Code 中提取未绑定的标签。
• styled-media-helper
  • 编写媒体查询。
• styled-tachyons
  • 将 tachyons 样式速记与普通 css 混合使用。
• styled-px2vw
  • 带有将 px 转换为 vw 单位功能的 styled-components 扩展。
• styled-normalize
  • 添加 normalize.css
• styled-email-components
  • 通过内联样式构建电子邮件优先组件的扩展。
• styled-breakpoints
  • 简单而强大的自定义断点。
• styled-reboot
  • Bootstrap v4 reboot.css
• polished
  • 轻量级的 Sass/Compass 风格混合器/帮助程序集。
• styled-reset
  • Eric Meyer 的 Reset CSS。
• styled-transition-group
  • 创建 react-transition-group 动画。
• shevyjs
  • 创建和管理全局排版和垂直节奏。
• design-system-utils
  • 实用程序，可更好地访问您的设计系统。
• styled-components-modifiers
  • 启用 BEM 风格的修饰符（和响应式修饰符）。
• webstorm-styled-components
  • 在 IntelliJ 编辑器中突出显示支持。
• styled-theming
  • 为您的应用程序创建主题。
• styled-system
  • 设计系统实用程序。
• styled-map
  • 将道具映射到样式的超简单库。
• styled-tools
  • 有用的插值函数。

测试

• jest-styled-components
  • Jest 实用程序。

样板

• styled-react-boilerplate
  • 现代且最小的样板。
• 生成器 create-redux-app
  • 在 create-react-app 之上添加 Redux 和其他有用的库。
• Superstylin'
  • Gatsby 启动器。
• react-boilerplate
  • 高度可扩展、离线优先的基础，具有最佳的开发体验，并侧重于性能和最佳实践。
• ARc
  • Atomic React App 样板。

---

真实应用

• Earner
  • 您访问芬兰就业社区的首选资源。
• Nulogy
  • 使用开源 Nulogy Components 构建的供应链管理软件。
• Nyxo iOS & Android App
  • 个性化睡眠指导移动应用程序。
• Vimeo
  • 视频协作、视频分发和视频其他所有内容。
• Orbit Components
  • Orbit Design System 的组件库，由 Kiwi.com 构建并供其使用。
• PageXL
  • 无代码网站构建器，可在几分钟内创建登录页面和在线商店。
• Taskade
  • 分布式团队的统一工作区。实时协作和组织工具。
• njt.now.sh
  • njt（npm 跳转到）是一个工具和服务，提供程序包导航快捷方式。它使用 Next.js 并涉及服务器端渲染 (源代码）。
• Strapi 管理面板
  • Strapi 内置管理面板，用于构建内容 API。
• Jane
  • 每日特惠网站，提供最新的时尚和家居装饰趋势。
• Sweetgreen Android App
  • Sweetgreen 是一家美式快餐连锁店，供应沙拉。它已经在 React Native Android 应用程序中使用 Styled Components。
• WebGazer
  • 正常运行时间监控和分析服务。
• Cloverleaf
  • 揭示有关您的团队隐藏素质的见解。
• The Players Tribune
  • 比赛的声音。
• Moleskine
  • Moleskine 数字工作室。
• FortniteMaster.com
  • 专业的 Fortnite Battle Royale 统计数据。
• Prisma
  • 面向 GraphQL 服务器的开源 GraphQL ORM (源代码）。
• InVision
  • 数字产品设计、工作流程和协作。
• TSM
  • TSM 官方网站。
• Swipe Life
  • Tinder Swipe Life。
• Autodesk
  • 在线 CAD 编辑器和查看器。
• Vogue
  • 时尚、趋势、美容和人物。
• Spectrum
  • 未来的社区平台 (源代码）。
• Casper
  • 让所有人都能睡得更好。
• Coinbase
  • 以信赖的方式购买和出售比特币、以太坊等。
• Typeform
  • 将数据收集变成一种体验。
• Atlaskit
  • Atlassian 的 Atlaskit (源代码）。
• ticketmaster.co.uk
  • 音乐会、戏剧、足球、家庭日出游的票务。
• shop.lego.com
  • 乐高商店。
• Patreon
  • 艺术家和创作者获得可持续收入并与粉丝建立联系的最佳方式。
• Target
  • 期望更多，付出更少。
• Dutchie
  • 在线大麻订购和送货。
• Tab Ipsum
  • 轻松生成虚假内容 (源代码）。
• Booben
  • 设计、开发、连接数据、获取源代码 - 所有这些都在一个地方。
• React Native Explorer
  • 轻松浏览 React Native 包和示例。
• Coinbase Pro
  • 美国数字资产交易所，提供交易 UI、FIX API 和 REST API。
• rick-morty-app
  • 瑞克和莫蒂信息门户。
• Hack Club
  • 全球非营利性高中编码俱乐部社区的网站 (源代码）。
• Helsinki Food Guide
  • 仅展示赫尔辛基最佳菜肴的网站。
• Atlas of of Economic Complexity
  • 研究和数据可视化工具，用于探索全球贸易流，跟踪这些动态随时间的变化，并发现每个国家的新的增长机会。
• Outline
  • 您团队的维基 (源代码）。
• Count Minutes
  • 帮助您掌控时间的应用程序。
• GitPoint
  • GitPoint 是功能最丰富的非官方 GitHub 客户端，100% 免费。
• en.kachkaev.ru
  • 使用 next.js 构建的个人主页；还使用 GraphQL、Docker、CI 和微服务架构 (GitLab 上的源代码）。
• WutTheLint
  • 可搜索的 linter 目录。
• GetShitDone
  • 用于跟踪您的工作任务的计时器 (源代码）。
• Swat.io
  • 由 Die Socialisten 为团队提供的社交媒体管理。
• Grabient.com
  • 用于生成 Web 渐变的精美简洁的 UI。(源代码）。
• CodeSandbox
  • 为 React 开发量身定制的在线编辑器 (源代码）。
• rosesdaycare.center
  • 营销网站，主题颜色在刷新时更改 (源代码）。
• joeireland.com
  • Joseph Ireland 的作品集 (源代码）。
• michaelhsu.tw
  • 使用 CRA 预渲染器构建的简单静态主页 (源代码）。
• Reactiflux
  • 使用 Gatsby 构建的 Reactiflux 社区主页 (源代码）。
• Dirtyredz.com
  • David McClain | Dirtyredz * 关于我、最新项目和联系 (源代码）。
• sachagreif.com
  • 使用 Gatsby 构建的个人主页 (源代码）。
• spaceexperience.club
  • 每天为您带来宇宙的壮丽图片，即每日天文图片。(源代码）。
• PostCSS.parts
  • 可搜索的 PostCSS 插件目录。

---

进一步阅读

文章

• styled-components 的幸福之路
• CSS 的现状、CSS in JS 以及 styled-components 如何解决我们几十年来的问题
• styled-components 的工作原理
• 使用 styled-components 变得时髦
• 使用组件文件夹模式编写可扩展的 React 应用程序
• 使用 Next.js 和 styled-components 构建博客
• 如何使用 styled-components 创建响应式 UI
• 如何使用 styled-components 构建简单的 HackerNews 信息流
• 创建真正通用的 React 组件系统
• Ryan Florence - 关于内联样式的随机想法
• 在任何地方渲染可汗学院的学习菜单
• 可复用 CSS 的未来
• “规模”FUD 和样式组件
• 💅 styled-components 背后的魔力

来自会议的视频

• 通往 styled-components 的道路，以及未来的道路 - Glen Maddern，前端中心
• ⚡️ - Max Stoiber - 通往 Styled Components 的道路 - React Conf 2017
• ColdFront16 • Glenn Maddern: 可复用 CSS 的未来

视频教程

• 使用 NPM 和 styled-components 创建样式指南
• 如何在 React 应用程序中使用 Styled Components
• JavaScript 中的 CSS

--- #