推薦 9 個樣式化組件的 React UI 庫

時間 2019-11-22

標籤推薦個樣組件 react 欄目 React 简体版

原文原文鏈接

簡評：喜歡 CSS in JS 嗎？本文將介紹一些使用樣式組件所構建的 React UI 庫，相信你會很感興趣的。css

在 React 社區，對 UI 組件進行樣式化的討論逐步從 CSS 模塊到內聯 CSS 再到 CSS in JS，很是熱烈。react

CSS in JS 的相對崛起，能更多地受到一些開發人員的青睞，與 React 組件生態系統的興起以及 Max Stoiber 和 200 多個貢獻者的樣式化組件項目的興起緊密相關。git

爲了節省你們的時間，我收集了一些有用的庫，它們利用樣式組件提供一個簡潔的開箱即用的工具包。能夠幫助你們將樣式化組件放到本身的應用 UI 中進行測試。github

你可使用 Bit 在可視目錄中組織樣式化組件集合，共享 CSS 組件，並在不一樣的項目中進行開發，每一個組件也均可以使用 NPM 安裝。bootstrap

1. Rebass

rebass 是一個「用樣式系統構建的 React 原始 UI 組件」，在 github 上有接近 5k star。它的特色是輕量，設計精美，有 8 個可擴展、可複用的組件，這些組件還具有響應性和可定製性。瀏覽器

2. Zendesk 的 Garden React 組件

雖然這個庫只有 350 個 star，但它提供了精心製做的組件，這些組件能夠單獨發佈到 NPM，也能夠輕鬆地做爲 Bit 組件來使用和共享。有的組件能夠用來響應一系列的用戶輸入設備，有的能夠被調整來處理從右到左的佈局，有些甚至包含動畫效果。它提供了不少 Web HTML、CSS 和 JavaScript 小模塊，能夠放到任何基於 React 的應用中。app

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。

其餘優秀項目

須要注意的是，這裏面許可能是再也不維護的或還在研發中的項目。

相關標籤/搜索

軟件推薦

硬件推薦