• 「React Bootstrap：」一個與 Bootstrap 框架集成的實用的 React UI 庫。
• 「Grommet：」如果您想在設(shè)計中實現(xiàn)可訪問性，這個 React UI 組件庫非常有用。
• 「Blueprint：」對于桌面 React 應(yīng)用程序，您需要查看 Blueprint 的產(chǎn)品。
• 「Ant Design：」這個庫的設(shè)計重點是與用戶的聯(lián)系：這是每個設(shè)計師都想實現(xiàn)的。
• **Onsen UI React:**如果你想構(gòu)建一個移動 React 應(yīng)用程序，這個庫將涵蓋 UI 設(shè)計。
• **Rebass:**這個庫的獨特之處在于你可以在你的代碼中使用樣式化的道具，而不需要打開第二個樣式表。
• **Semantic UI React:**顧名思義，這個 React 庫集成了語義 UI 開發(fā)框架。
• **MUI:**為了實現(xiàn)類似Google 的 Material Design 的外觀，MUI 是一個很好的選擇——特別是考慮到它的實現(xiàn)簡潔明了。

事實上，庫的數(shù)量遠不止八個。但是，我們認(rèn)為這些代表了市場上最高的質(zhì)量。更重要的是，它們沒有任何順序——所以請隨意閱讀每一個，看看它們是如何比較的。

1、React Bootstrap

首先，我們有React Bootstrap。這是較舊的 React UI 庫之一，這意味著您為 UI 設(shè)計奠定了良好的基礎(chǔ)。

該庫具有以下特點：

1. 使用TypeScript。
2. 使用 Bootstrap 樣式表，將能夠?qū)⑺cBootstrap 主題一起使用。

你可以通過如下指令快速引入該包

npm install react-bootstrap bootstrap

React Bootstrap 使用“variants”來創(chuàng)建不同的元素：

function TypesExample() {
  return (
    <>
      <Button variant="primary">Primary</Button>{' '}
      <Button variant="secondary">Secondary</Button>{' '}
      <Button variant="success">Success</Button>{' '}
      <Button variant="warning">Warning</Button>{' '}
      <Button variant="danger">Danger</Button>{' '}
      <Button variant="info">Info</Button>{' '}
      <Button variant="light">Light</Button>{' '}
      <Button variant="dark">Dark</Button>
      <Button variant="link">Link</Button>
    </>
  );
}

export default TypesExample;

此示例將創(chuàng)建一系列的樣式按鈕：

總的來說，React Bootstrap 使用起來很直觀，并且會幫助創(chuàng)建看起來很棒的 UI 元素。

2、Grommet

在我們最好的 React UI 組件庫和框架列表中，下一個是Grommet。這提倡簡化的方法，如果將它與 React Bootstrap 進行比較，它會提供更多的功能。

該框架不需要很長的設(shè)計周期就可以開始工作。例如，您有Grommet Themer來幫助您將組件庫與您的配色方案相匹配。更重要的是，您擁有專用的Grommet Designer，它使用簡單的構(gòu)建器來創(chuàng)建您的組件設(shè)計。

使用 npm 或 Yarn 可以輕松安裝：

npm install grommet grommet-icons styled-components --save

可以使用以下方式創(chuàng)建一個簡單的光滑按鈕

export default () => (
  <SandboxComponent>
    <Button label='Submit' onClick={() => {}} />
  </SandboxComponent>
);

總而言之，我們喜歡 Grommet 的酷炫默認(rèn)設(shè)計、可訪問性特性和其他設(shè)計工具。

3、Blueprint UI

如果您想要一個簡潔又實用的 React UI 組件庫，Blueprint UI可能是適合您的工具包。

](https://www.designbombs.com/wp-content/uploads/2023/01/blueprint-ui.png)

你不會希望在移動優(yōu)先的應(yīng)用程序中使用 Blueprint。這是一種開發(fā)在瀏覽器中運行的桌面應(yīng)用程序的方法: 復(fù)雜度越高越好！

你可以通過如下指令快速引入該包

npm add @blueprintjs/core react react-dom

通過以下代碼可以創(chuàng)建一個按鈕：

<Button intent="success" text="button content" notallow={incrementCounter} />

我們認(rèn)為 Blueprint UI 是一種簡單易用的工具，非常適合快速啟動設(shè)計。

4、Ant Design

Ant Design自稱是世界上第二受歡迎的 React UI 框架。即便如此，它仍然是你項目的首選。

Ant Design 的設(shè)計理念就是清晰。您可以在其默認(rèn)設(shè)計和工具包含中均可以看到這一點。例如，你有一個前端主題工具，還有豐富而現(xiàn)代的組件，看起來很漂亮。

你可以通過如下指令快速引入該包

npm install antd

要創(chuàng)建一個按鈕，您只需要最少的行數(shù)：

import { Button } from 'antd';

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
  </>
);

結(jié)果是一個直觀、簡單且簡潔的按鈕：

總的來說，Ant Design 可以幫助你創(chuàng)建現(xiàn)代設(shè)計，在我們看來，它是最好的 React UI 組件庫和框架之一。

5、Onsen UI React

Onsen UI React是移動應(yīng)用程序的組件庫。

它同時支持 Android 和 iOS，這意味著您擁有適用于 Material 和 Flat 設(shè)計的專用組件。更好的是，Onsen UI React 將自動檢測您的設(shè)計適用于哪個平臺并相應(yīng)地進行調(diào)整。

通過以下指令將引入該包。

npm install onsenui react-onsenui --save

您將使用VOns<element>組件和修飾符來創(chuàng)建元素：

<v-ons-button>Normal</v-ons-button>
<v-ons-button modifier="quiet">Quiet</v-ons-button>
<v-ons-button modifier="outline">Outline</v-ons-button>
<v-ons-button modifier="cta">Call to action</v-ons-button>
<v-ons-button modifier="large">Large</v-ons-button>

加上一些樣式，您將有一些漂亮的按鈕可以添加到您的項目中：

對于移動應(yīng)用程序，您找不到許多容易使用的庫：所以強烈推薦使用該 React UI 組件庫。

6、Rebass

樣式對于任何UI設(shè)計來說顯然都非常重要。Rebass試圖使用styled props，以便您可以將其編碼到React UI中。

Rebass 這個 React UI 庫的設(shè)計理念是盡量減少需要編寫的 CSS 代碼。這樣可以讓開發(fā)者在開發(fā)過程中更接近最終的設(shè)計效果，而不需要進行第二輪的 CSS 樣式調(diào)整。此外，Rebass 提供了一組原始組件，這些組件也具有良好的外觀效果，并且整個庫非常輕量級。因此，Rebass 非常靈活、可擴展，而且容易與您的項目集成。

通過以下指令引入該包：

npm i rebass

通過以下方式添加一個按鈕：

<Button variant='primary' mr={2}>Primary</Button>

Rebass for React 類似于 Bootstrap for CSS，但具有更好的標(biāo)記和一流的設(shè)計選項。該庫將幫助您進行組件設(shè)計，而不是 HTML 和 CSS 設(shè)計。

7、Semantic UI React

與 React Bootstrap 非常相似，Semantic UI React是其父開發(fā)框架的擴展。

如果你選擇使用 Semantic UI，這將是最好的 React UI 組件庫和框架之一。更好的是，您將能夠快速集成它，并且使用起來很直觀。此外，Semantic UI還提供了一些強大的功能，例如增強、簡寫屬性和自動控制狀態(tài)。這意味著您可以創(chuàng)建組件，并且它們將自我管理其狀態(tài)，無需您的輸入。

通過以下指令引入該包：

npm install semantic-ui-react semantic-ui-css

簡單使用

const ButtonExampleButton = () => <Button>Click Here</Button>

如果您選擇使用Semantic UI，這個 React UI 組件庫將最適合您的項目。

8、MUI

幾年前，Google's Material Design曾出現(xiàn)在公眾視野中一段時間。這個想法是將布局和設(shè)計選擇標(biāo)準(zhǔn)化,以達到 Google 認(rèn)為的“corrent”。在不討論這種方法的優(yōu)缺點的情況下，MUI是最好的 React UI 組件庫和框架之一，可以幫助您以這種風(fēng)格進行創(chuàng)建。

MUI 是一個工具箱而不是一個簡單的庫。例如，您有MUI Core，還有用于高級用例的MUI X。當(dāng)您需要樹視圖、數(shù)據(jù)選擇器、數(shù)據(jù)網(wǎng)格等時，這就是您要使用的工具。此外，還提供了 UI 布局模板和設(shè)計工具包可以幫助您完成項目。

引入所需要的包：

npm install @mui/material @emotion/react @emotion/styled

簡單使用：

<Button variant="contained">Contained</Button>

考慮到可用性、實現(xiàn)和結(jié)果的綜合因素，選擇 MUI 是沒有錯的。如果您需要將應(yīng)用程序與 Google 的設(shè)計風(fēng)格進行整合，那么 MUI 是理想的選擇。

總的老說

React是用來幫助你加快編碼速度的的一個庫，React UI能夠進一步提速，如果你基于Google的設(shè)計原則進行設(shè)計可以使用MUI；如果開發(fā)面向移動設(shè)備的UI設(shè)計可以使用Onsen UI React；如果開發(fā)桌面應(yīng)用程序可以首選Blueprint UI。庫雖然很多，但是大部分人首選還是Antd。

參考文檔：https://www.designbombs.com/best-react-ui-component-libraries-frameworks/。