推薦 9 個樣式化組件的 React UI 庫
簡評：喜歡 CSS in JS 嗎？本文將介紹一些使用樣式組件所構建的 React UI 庫，相信你會很感興趣的。
在 React 社區，對 UI 組件進行樣式化的討論逐步從 CSS 模塊到內聯 CSS 再到 CSS in JS，非常熱烈。
CSS in JS 的相對崛起，能更多地受到一些開發人員的青睞，與 React 組件生態系統的興起以及 Max Stoiber 和 200 多個貢獻者的樣式化組件項目的興起緊密相關。
為了節省大家的時間，我收集了一些有用的庫，它們利用樣式組件提供一個簡潔的開箱即用的工具包。可以幫助大家將樣式化組件放到自己的應用 UI 中進行測試。
你可以使用 Bit 在可視目錄中組織樣式化組件集合，共享 CSS 組件，並在不同的項目中進行開發，每個組件也都可以使用 NPM 安裝。
1. Rebass
rebass 是一個“用樣式系統構建的 React 原始 UI 組件”，在 github 上有接近 5k star。它的特點是輕量，設計精美，有 8 個可擴展、可復用的組件，這些組件還具備響應性和可定制性。
2. Zendesk 的 Garden React 組件
雖然這個庫只有 350 個 star，但它提供了精心制作的組件，這些組件可以單獨發布到 NPM，也可以輕松地作為 Bit 組件來使用和共享。有的組件可以用來響應一系列的用戶輸入設備，有的可以被調整來處理從右到左的布局，有些甚至包含動畫效果。它提供了很多 Web HTML、CSS 和 JavaScript 小模塊，可以放到任何基於 React 的應用中。
3. Atlaskit
Atlassian 的 React UI 組件庫，遵循 Atlassian 的設計準則並使用樣式組件。該庫旨在為所有構建在 React 上的 Atlassian Cloud 產品實現 ADG3 設計。每個組件都是一個包。
4. Grommet V2
Grommet 庫（被 Netflix，Uber 等使用）的 V2 版本用樣式組件取代了 SASS。所以現在你不再需要特殊的配置或使用 SASS 來為你的組件設計樣式，樣式不再是全局的，並且不再在構建時進行主題化。他們官網還提供了許多示例，動手試試吧。
5. Smooth-UI
獲得了 800 star 的 React UI 組件庫，強調用戶體驗，包括樣式的可擴展性。它還公開了一些開箱即用的類，所以我們不必學習新的 API 來擴展組件，還可以在調試組件時使用。
提供一個 smooth-ui codesandbox 示例。
6. Reactackle
Reactackle 是一個帶有樣式組件的 React UI 庫，提供跨瀏覽器支持，有 200 個 star。 該庫支持基本設計方面的自定義，並提供開箱即用的主題。
7. Reakit
Reakit 可以讓你用任何組件或容器來創建新的東西。 所有組件就像 HTML 元素一樣都遵循 WAI-ARIA 標準，且符合單元素模式。 在 GitHub 上獲得了 1k star。
嘗試使用 codesandbox 的案例
8. React CSS loaders 和 Styled loaders
react-css-loaders 是純 CSS React 加載組件的集合，它基於流行的 css-loaders 項目並使用樣式組件構建。
Styled loaders 是一套基於 Preact 和 Styled Components 構建的加載器，基於流行的 spinkit 項目。
9. Styled icons
它提供了包含 Font Awesome、Feather、Material Design 和 Octicons 圖標包的樣式組件，且完全支持 TypeScript 類型和 tree-shaking / ES 模塊。可以在 “styled-icons 網站”中查看這些 icon。
它提供了包含 Font Awesome、Feather、Material Design 和 Octicons 圖標包的樣式組件，且完全支持 TypeScript 類型和 tree-shaking / ES 模塊。可以在 “styled-icons 網站”中查看這些 icon。
其他優秀項目
需要註意的是，這裏面許多是不再維護的或還在研發中的項目。
styled-components/awesome-styled-components
zksailor534/react-adminlte-dash
xDae/styled-bootstrap
buttercup/ui
coderboxapp/coderbox-atoms
yldio/joyent-portal
hackclub/design-system
balena-io-modules/rendition
bondz/react-epic-spinners
推薦 9 個樣式化組件的 React UI 庫