生態系統

貢獻

如果您知道任何使用 styled-components 構建的專案，我們隨時歡迎您的貢獻和建議！請先閱讀貢獻指南，然後提交 PR。

使用 styled-components 構建

元件

• react-data-table-component
  • 具有內建排序、分頁、選擇、可展開列和可自定義樣式的資料表格。
• oah-ui
  • 具有四個主題、網格系統、從左到右和從右到左方向、用於添加和編輯主題的主題系統的元件庫。
• react-styled-floating-label
  • 適用於任何 HTML 輸入的浮動標籤元件。
• grape-ui
  • 使用 styled-system 和其他開源元件的元件庫。
• styled-off-canvas
  • 簡單的單次畫布選單。
• React95
  • Windows 95 風格的 UI 元件。
• react-functional-select
  • 微型且微優化的選擇元件。
• Grommet
  • 構建時考慮到可訪問性、模組化、響應性和主題化的元件庫。
• bootstrap-styled
  • Bootstrap 4 元件、mixin、實用程式實作，並考慮到全球共享社群生態系統。
• react-epic-spinners
  • 可重複使用的載入器元件。
• styled-react-modal
  • 具有熟悉 API 和語法糖的模態元件。
• Smooth UI
  • UI 庫 / 設計系統。
• rendition
  • 一個功能強大的元件庫，可快速構建現代 Web 應用程式。
• styled-icons
  • 來自流行圖示包的圖示（Font Awesome、Material、Octicons 等）。
• @hackclub/design-system
  • 由 Hack Club 構建的靈活、可重複使用的 Web UI 元件集。
• 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-components。
• styco
  • VS Code 擴充功能，可輕鬆地將 JSX 內嵌樣式重構為 styled-components。
• react-components-cli
  • 用於生成 styled-components 的客戶端。
• theme-miner
  • 使用 styled-components 在 React 中輕鬆且易讀地創建複雜的設計系統。
• 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 風格 mixin/輔助工具集。
• 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 starter
• react-boilerplate
  • 具有最佳開發人員體驗並專注於效能和最佳實務的高度可擴展、離線優先的基礎。
• ARc
  • Atomic React 應用程式樣板。

---

實際應用程式

• Earner
  • 您了解芬蘭就業社群的首選資源。
• Nulogy
  • 使用開源 Nulogy Components 構建的供應鏈管理軟體。
• Nyxo iOS 與 Android 應用程式
  • 個人化睡眠教練行動應用程式。
• Vimeo
  • 影片協作、影片發行和其他所有影片相關服務。
• Orbit Components
  • 由 Kiwi.com 為其自身構建的 Orbit 設計系統元件庫
• PageXL
  • 無程式碼網站建構器，可在幾分鐘內創建登錄頁面和線上商店。
• Taskade
  • 分散式團隊的統一工作空間。即時協作和組織工具。
• njt.now.sh
  • njt（npm jump to）是一個工具和服務，提供套件導航捷徑。它使用 Next.js 並涉及伺服器端渲染（來源）。
• Strapi 管理面板
  • Strapi 內建管理面板，用於構建內容 API。
• Jane
  • 每日優惠網站，提供最新的時尚和家居裝飾潮流。
• Sweetgreen Android 應用程式
  • Sweetgreen 是一家美式快速休閒餐廳連鎖店，供應沙拉。它已將 Styled Components 用於 React Native Android 應用程式。
• 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
  • Rick and Morty 資訊入口網站。
• Hack Club
  • 全球非營利高中程式設計俱樂部社群的網站（來源）
• 赫爾辛基美食指南
  • 網站僅收錄赫爾辛基最美味的佳餚。
• 經濟複雜性地圖集
  • 研究和資料視覺化工具，用於探索跨市場的全球貿易流動，追蹤這些動態隨時間的變化，並為每個國家/地區發現新的增長機會。
• Outline
  • 團隊 Wiki（來源）
• 計數分鐘
  • 幫助*您*掌控*您*時間的應用程式。
• GitPoint
  • GitPoint 是功能最豐富的非官方 GitHub 客戶端，而且 100% 免費。
• en.kachkaev.ru
  • 使用 next.js 構建的個人首頁；還使用 GraphQL、Docker、CI 和微服務架構（GitLab 上的來源）。
• WutTheLint
  • 可搜尋的程式碼檢查器目錄。
• GetShitDone
  • 用於追蹤工作任務的計時器（來源）。
• Swat.io
  • 團隊社群媒體管理，由 Die Socialisten 製作
• Grabient.com
  • 一個美觀簡潔的網頁漸層產生器使用者介面。(原始碼)。
• 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 更加靈活地運用 CSS
• 使用元件資料夾模式編寫可擴展的 React 應用程式
• 使用 Next.js 和 styled-components 建立部落格
• 如何使用 styled-components 建立響應式 UI
• 如何使用 styled-components 建立簡單的 HackerNews Feed
• 建立真正通用的 React 元件系統
• Ryan Florence - Ryan 關於內聯樣式的隨想
• 隨心所欲地渲染 Khan Academy 的學習選單
• 可重複使用 CSS 的未來
• 關於「規模」的 FUD 以及樣式化元件
• 💅 styled-components 背後的魔法

會議影片

• 通往 styled-components 的道路，以及未來的方向 - Glen Maddern，Front End Center
• ⚡️ - Max Stoiber - 通往樣式化元件之路 - React Conf 2017
• ColdFront16 • Glenn Maddern：可重複使用 CSS 的未來

教學影片

• 使用 NPM 和 styled-components 建立樣式指南
• 如何在 React 應用程式中使用樣式化元件
• JavaScript 中的 CSS

--- #