推薦 9 個樣式化組件的 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。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！