我现在是我公司的首席前端开发人员。刚加入公司时，公司当时还没有任何前端开发人员，所以我成了第一个。因此，随之而来的是许多重要的决策。

我意识到构建一个组件库并不是速成的事。

• 我们前端的技术栈是什么？
• 用哪些开发工具？
• 用哪个包管理器？
• 我们的工作流程会是什么样的？

幸好，在前端领域社区很棒，网上的信息和工具也足够丰富且优质，因此挑选一些适合自己使用的工具也不会太难。

然而，在决定样式时却稍微棘手一些。我考虑过从零开始设计样式并构建自己的组件库，但当尝试这种做法在简单的按钮上时，我意识到构建一个组件库不是一件速成的事情。需要处理这么多边界情况，所以我决定使用一个现有的组件库。

也有很多人警告不要使用现有的组件库，但我个人认为这主要看你自己的情况。

那里也有很多关于使用现有组件库的警告，但在我看来，这真的取决于你的具体情况。如果你有一个设计师、几位前端开发人员，并且对整个设计风格有一个明确的规划，那么当然，一个自定义的组件库可能是最好的前进方式。然而，我是一名独自负责前端开发的开发者，需要快速搭建原型来展示给潜在投资者，为筹集我们小公司的资金。我需要使用现有的解决方案。

当我做出这个决定后，是时候精简候选名单了。这些年我使用过许多组件库，我列出了以下名单：

• Material UI
• Mantine
• Chakra UI
• ant.design （这是一个中文框架）
• Bootstrap
• HeadlessUI （无头UI框架）

还有一些，但这些是我主要考虑的几个。

我们从 Bootstrap 开始吧。

不知怎的，我发现一些资深开发者很快就会不屑Bootstrap，甚至有时还会嘲笑它。“你用了Bootstrap？！为什么？！”我有时听到这种带着嘲讽语气的问题，好像这个库低他们一等。

另一方面，似乎它成为了初级开发者或只想快速搭建一些临时界面的后端开发者的首选库。这也很有趣。使用起来并不比其他库更简单，看起来也没有更美观，但在很多情况下似乎还是默认的选择。

Bootstrap说到Bootstrap，已到第5版。你可以在这里查看[文档]，可以发现有不少组件和丰富的自定义选项。

一些经验丰富的开发者很快就会忽略 Bootstrap，有时甚至会嘲笑它。

对我来说，我没有选择它主要是因为它基于实用组件，而且我觉得默认的样式并不适合我需要构建的应用程序。很容易认出用Bootstrap构建的最小可行产品（Minimum Viable Product），这让我想起了Bootstrap刚出来时构建的应用程序，它们总是显得很笨重，看起来就像是用Bootstrap搭建的应用。我就是不喜欢这种设计。也许我真的是一个程序员中的“高人一等”。

用HeadlessUI，我很快就因为两个原因而放弃了它。

1. 我以前从未使用过它，看起来我可能会花太多时间来美化和调整各个组件，而不是快速构建所需的功能模块。
2. 你必须与TailwindCSS一起使用它。虽然我喜欢在静态站点上使用Tailwind，但在这样的动态站点上再次使用它，我认为这会花费太多时间来美化和建立组件库。

这基本上就是如何最好地利用我的时间。虽然我确实喜欢构建设计库的整个过程，但我真的抽不出时间来享受这个过程。

这个真的让我挺好奇的。

我真的喜欢他们的文档页面。我真的很喜欢他们提供的所有示例。这使得开发者很容易了解如何使用这些组件及其提供的各种选项。他们提供了一长串有用的组件。像pagination和timepicker这样的组件对我来说非常有吸引力，因为我正在处理的项目中需要用到这些组件。它现在也是一个成熟的库，当前版本是5。

所以我为什么最终没有选择这个库呢？我觉得这主要是由于很不理智的原因：

1. 我不认识任何亲自使用过它的人。我没有从我尊敬的人那里得到任何明确的推荐——无论是我认识的人，还是我尊敬的网上开发者。
2. 可能只是直觉吧？有些地方就是没够吸引我来做这个决定。我有一大堆工作等着我去做，这个选择似乎有点冒险。如果出了问题，我将不得不回答一些棘手的问题。

总而言之，这是一个超棒的组件库，我肯定要在我的一些即将开始的个人项目中使用它。

我其实多次在个人项目中使用了 Chakra-UI，觉得还不错。不过有几点原因，所以没选它来做这个项目。

• Chakra 默认组件的风格、外观和感觉与我计划构建的应用程序不符。（风格和设计非常重要，）
• 组件的 API 略显有限。如果我们将 Chakra 的输入字段 与 Mantine 的输入字段 进行比较，可以发现 Mantine 的输入字段提供了更多属性，其中一些我经常使用。对我来说，rightSection 和 leftSection 比 Chakra 的 InputGroup、InputLeftAddon 和 InputRightAddon 更直观且更易于使用。

     <InputGroup size='sm'>  
        <InputLeftAddon>  
          https://  
        </InputLeftAddon>  
        <Input placeholder='网址' />  
        <InputRightAddon>  
        </InputRightAddon>  
      </InputGroup>

这也许只是一件小事，但如果我要在一个长时间的项目中用一个组件库，并且要和它一起度过很多工作小时，这些细节就会变得很重要。

所以最终它并不是最适合我的选择。

就像许多使用 React 的开发人员一样，我过去经常使用 Material UI，所以对此非常熟悉。它确实有很多值得称赞的地方——它有很多资源，广泛的用户基础，一直在不断改进和完善，非常可靠且经过了充分的测试，它的文档也做得非常好。

我必须承认，这些理由都不充分，而这种情况在做生活中的决定时经常出现。最后还是得靠直觉，而这种直觉往往难以用逻辑来解释。

所以，我为什么没有选择它来做我正在做的那个大项目呢？对我来说，有几点原因：等等。

• 风格 — 有点像是 Google 风格的东西，你知道我的意思吧。这个库基于 Google 的 Material Design。别误会，这没什么问题，但当你用 Material UI 建立一个应用程序时，除非你进行一些精细的自定义，否则这些设计仍然会带有一些谷歌的元素，而这并不是我想要的。
• 输入字段 — 我不喜欢 Mui 上的输入字段设计。这些输入字段有点太高了。我即将要开发的应用程序将会有许多输入字段，所以这一点很重要。
• 用得太多了 — 我觉得我过去可能过于依赖 MUI 了，所以想换一种新鲜的方式来激励自己，获得一些灵感和热情。

我必须承认，这些理由其实都不太站得住脚，而在生活中做某些决定时，这种情况很常见。归根结底，这靠的是直觉，这种直觉很多时候是无法用冰冷的逻辑来解释的。

我的哥们儿告诉我要试试 Mantine。我第一次了解到它是在观看杰克·赫里根的精彩 YouTube 视频之一时。看了 Mantine 的文档（https://mantine.dev/）后，我立刻就被其布局和丰富的组件库吸引。而且它更新也很频繁，几乎每周都有新版本。

默认样式也让我满意，从我查看的所有库中，这个更符合我设想的风格。它有很多不错的组件，比Mui或Bootstrap等库更多，并且用起来也挺直观。

也在 版本 7（在我写这篇文章时的最新版本），他们将样式迁移至原生 CSS。它不再依赖于 Emotion 来生成样式。我认为这是一个积极的改变，因为它提高了性能，并且减小了库的打包体积，并且允许在不支持 CSS-in-JS 的环境中使用 Mantine。原生 CSS 在最近的发展中已经相当成熟了，因此在这样的库中使用它是一个很好的选择。

我已经用了这个库大约一年时间了，我对这个决定依然非常满意。我用它构建的应用看起来真的很棒，我使用了许多 Mantine 提供的组件。它确实没有让我失望，表现得相当不错！

说实话，在前端领域，当我们给应用做样式设计时，选择简直太多了。有这么多才华横溢的开发者创建了那么多优秀的库（全部免费使用），我们可以直接导入并立即开始使用。我认为，随便选一个我提到的库，你都会觉得非常顺手，你的应用在风格上也会非常漂亮。

我认为尝试不同的库也非常重要，而不要只局限于一个。这样你可以学到不同的方法，看到哪些有效，哪些可能不太行，从而扩展你的开发经验。

我是前端开发者，主要在日常工作中使用 React 和 Typescript。我喜欢探索新工具和库，特别喜欢 JavaScript 生态圈。

我喜欢写博客文章，分享我新发现的令人兴奋的新工具，写一些如何操作的文章，也会偶尔发表一些个人看法的文章。

我和我的家人住在捷克的布拉格。

可以看看我博客上的文章。

有兴趣的话可以看看我的LinkedIn和Github。

感谢你加入_In Plain English_社区！在你离开之前,

• 记得为作者👏点赞和关注哦
• 关注我们：X|领英|YouTube|Discord|通讯简报
• 访问我们的其他平台：Stackademic|CoFeed|Venture|Cubed
• 更多精彩内容，欢迎访问PlainEnglish.io