适用于你的下一个 React 项目的 10 个 UI 框架

我是一名开发者，而不是设计师。这意味着我的大部分业余项目都会使用 CSS 框架，以确保它们看起来不至于太差。以下 10 个 CSS 框架，值得你在下一个 React 项目中考虑。其中一些是专为 React 构建的，另一些则是可以与 React 良好兼容的通用框架。

React UI 框架

这些是专为 React 设计的 UI 框架。如果你正在规划一个大型项目或功能齐全的 Web 应用，这些框架将非常有用。

Material UI 是一个功能齐全的 React UI 框架。它支持 Material Design 的所有 UI 元素，并自带 CSS-in-JS 解决方案，方便编写 CSS。Material UI 目前在 Github 上拥有 68.9k 个 star。

它是市面上最古老、功能最齐全的 UI 框架之一。如果您需要稳定性和一流的文档，不妨试试 Semantic UI。Semantic UI React 在 Github 上拥有 1.23 万颗星。

React Bootstrap 是 Bootstrap 的重建版本，专为 React 打造。虽然它在 React 中拥有出色的组件支持，但尚未达到版本 5。React Bootstrap 在 Github 上拥有 1.95 万颗星。

近年来，微软悄然进军 React 领域，并将 Office 和大多数其他 Web 应用迁移至 React。在 React 开发如此活跃的情况下，微软还发布了一个相当全面的 UI 框架，其中包含 React 绑定。Fluent UI 在 Github 上拥有 1.15 万颗星。

这些 CSS 框架并非专为 React 构建，但在 React 项目中运行良好。如果您正在构建落地页或博客，并且不需要像 Web 应用那样使用全面的 UI 框架，但仍需要一些框架来构建页面，那么这些框架非常适合您。

Bulma 是一个高度可定制的 CSS 框架，它提供了构建响应式网页的组件。截至撰写本文时，BulmaCSS 在 Github 上已获得 43.7k 个 star，因此可以说它是一个非常受欢迎的框架。

TailwindCSS 是一个实用至上的 CSS 框架，它包含丰富的类，几乎可以构建任何内容。虽然 TailwindCSS 并非专门针对 React 的 UI 框架，但它与 React 集成得非常好。TailwindCSS 在 Github 上拥有 42.9k 个 star。

Bootstrap 的官方版本。无需赘述，Bootstrap 是一个传奇的 CSS 框架，几乎每个前端开发者都会接触到它。Bootstrap 在 Github 上拥有令人印象深刻的 15.1 万颗星。

虽然这些仍然是 CSS 框架，但我决定将它们归入不同的类别，因为它们的用途不同。如果你想快速上线网页，或者只是想在不投入太多时间的情况下构建 MVP，这些极简 UI 框架可以帮你实现目标。

一个无类 CSS 框架，为您提供一些合理的默认设置以供开始使用。

如果您希望直接从源码获取 CSS 样式，那就别再犹豫了。虽然这些样式并非最美观，但它们确实适用于某些类型的网站，而且您完全可以放心，它们一定会有效。

一个无类 CSS 库，它为 HTML 元素添加了很好的默认值，并在底层使用 normalize.css 和 sanitize.css 以获得一致的体验，并支持暗模式和开箱即用的自动主题检测

Water CSS 是另一个无类 CSS 框架，它为您提供开箱即用的暗模式，为您提供更好的表单元素并改善排版。

如果你喜欢这篇文章，你应该看看Awesome Devtools。这是一个为 Web 开发者提供的更丰富的 DevTools 集合。