香港赛马会特码总部:推薦 9 個樣式化組件的 React UI 庫

碼頭工人 11個月前發布 | 8K 次閱讀

赛马会一码三中三资料 www.iclqr.icu 在 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。

其他優秀項目

需要注意的是,這里面許多是不再維護的或還在研發中的項目。

  1. styled-components/awesome-styled-components

  2. zksailor534/react-adminlte-dash

  3. xDae/styled-bootstrap

  4. buttercup/ui

  5. coderboxapp/coderbox-atoms

  6. yldio/joyent-portal

  7. hackclub/design-system

  8. balena-io-modules/rendition

  9. bondz/react-epic-spinners

 本文由用戶 admin 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!
個評論