Bootstrap和Material UI哪个更适合React？

Question

Bootstrap和Material UI哪个更适合React？

75

在我的项目中，我同时使用了Bootstrap和Material UI组件，有时我需要在Bootstrap组件中使用Material UI组件，界面显示也符合我的预期。然而，我被建议不要采用这种方法。是否有任何原因呢？毕竟两者都使用网格(grid)并且可以进行弹性(flex)布局？

- KT-mongo

28

Material UI 在 GitHub 上拥有 49,000 颗星 https://github.com/mui-org/material-ui，而 React Bootstrap 仅有 16,000 颗。显然，很多使用 React 的人选择了 Material UI。我将此作为评论添加以避免被踩。 - Daniel Viglione

10

但是下载数据告诉了另一种情况：https://www.npmtrends.com/material-ui-vs-react-bootstrap - pmiranda

19

这是因为您正在比较已弃用的 material-ui npm 包和应该使用的当前包 @material-ui/core。https://www.npmtrends.com/react-bootstrap-vs-@material-ui/core - Mayank Kashyap

迁移至 material-ui，感谢分享统计数据！ - Harvester Haidar

4

我发现最好、最简单的原因是结构清晰。你应该始终努力使自己能够在一年未见某个代码文件后打开它，并通过一次浏览理解它的功能和实现方式。为此，我个人认为最好选择一个框架并坚持使用它。 - Johan Wintgens

4个回答

13

最近我遇到了这种情况，我选择同时使用Bootstrap和Material UI进行特定任务。由于这是一个响应式的Web应用程序，所以使用Bootstrap来布局是最合适的选择，而对于小部件，我个人更喜欢使用Material UI。

- user.io

15

几年后的最新情况更新：我完全剥离了Bootstrap，现在只使用Material UI。这样更容易管理，减小了捆绑文件的大小。 - user.io

10

您绝对可以同时使用两者，但您需要注意以下内容：

除非您仔细选择每个库的元素来管理它，否则提供的功能将会有很多重叠。即使这样，您仍会面临无法避免重叠的情况。这基本上会导致更大的包。
您必须维护两个系统的主题变量，以便在应用程序中始终保持一致的演示。即使这样，有时候您的表格复选框与表单复选框看起来不同，因为它们来自不同的库。
您必须学习和了解两个系统。这意味着有时候很难找出某个错误的原因。您还将花费更多时间决定哪个库适用于哪个组件。

总体而言，使用两个不同的系统需要更多的工作，并且事物看起来不一致的可能性更高。话虽如此，混合使用具有有限主题的网格系统等内容可能不会太糟糕。

如果可能的话，我强烈建议您选择一个系统并坚持使用它。

- Denis Pshenov

3

同时使用两者会增加你的JS文件大小。

Material UI 和 Bootstrap 都提供按钮等基本样式的组件，因此请选用其中一个。

您可以只使用 Bootstrap 的网格结构，也可以选择使用 Flex 布局。

- m.rohail.akram

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- o43 · Accepted Answer

我往往文风冗长，所以我将简洁的答案放在这里：

结论：

谁说同时使用两种技术不好可能只是在表达他们的意见。实际上，在设计中使用两者都不好并缺乏上下文的说法。@user3770494 提出了一个非常好的观点——尽管该点关于构建大小是正确和真实的，但它确实取决于应用程序的范围。如果是一款公司内部应用程序，所有人都在本地光纤网络上，它们都会被缓存在内存中...但是（虽然你不认识我）如果您将其混合使用，我不会以负面方式评判您，除非它是一个在移动端（低端设备），桌面端和其他世界各地设备上运行的主要百万用户应用，需要实时更新并具有10,000个活跃用户在任何给定时间24/7的流式动态内容。

事实上，如果不是生死攸关的问题，我会建议同时使用两者，并自己做一些研究和尝试。理解多个解决方案的经验比只“致力于单一解决方案”更好，有助于个人成长。

本文其余部分是可选的- 欢迎阅读 :)

我个人曾经在实际应用中同时使用过这两者，也分开使用过它们......我还从头开始做了所有的事情......（CSS是我工作中最不喜欢的部分，幸运的是我有一个很擅长它的同事）这是我的想法：

警告：我通常会很啰嗦。

免责声明：

作为一个注重功能而非形式的人，形式只是客户要求微小更改的琐碎事项。我会尽力在这方面不表达“每个选项外观和感觉”的意见。

此外，我正在考虑你的问题，即我正在进行的选择-使用ReactJS / create-react-app制作触摸屏嵌入式系统的“演示”项目-因此我将推出半打模拟程序，仅用于演示（CCscanner，条形码扫描器，GPS，网络摄像头集成等有趣的东西）。因此，我正在研究对我来说最容易致力于这个“因为我无聊，并且有一个pi3b +板玩玩）。”

回答：

如果您有时间、精力和资源，混合使用它们真的没有什么问题。但是，您需要考虑它的时间/成本/效益。DIY使最终用户满意-即使您混合使用它们。完全自己制作相当于重新发明轮子-但您始终可以引入bootstrap样式等。
存在的风险是，如果两者同时使用，一定不要“过度混合”它们-否则，当您尝试对任何一个进行版本更改时，将始终存在问题。
我喜欢MaterialUI的很多东西，但是我实在不喜欢默认情况下的一些外观（样式）-从功能上讲，我比较喜欢它而不是bootstrap，但与此同时，我不喜欢MaterialUI的React编程风格（作为一个纯粹主义者，我讨厌CSS，但知道它有多么重要-必须使用!important...是非常非常非常非常非常非常非常大的问题），与我和同事使用的方式相比。并不是说它比我的偏好更好或更差-但其中的一些事情确实令我感到不安（即使它们出于好的原因）。
Bootstrap有很多选择可供使用-我喜欢它的外观更好，我喜欢它如何与ReactJS结合使用-但是有reactstrap和react-bootstrap之分（这就是我找到你的帖子的原因，试图弄清楚在我正在做的演示项目中使用哪个）。
最近（用于生产项目），我确实尝试坚持使用一个，但通常我正在制作的系统是功能优于形式的。因此，它们并不太关心UI元素，而是关于如何使用它而不是让它看起来漂亮。因此，我坚持使用单个元素只是为了让我的工作更轻松-并且通常仍会自己覆盖样式...如果原始样式惹恼我。但我不会坚持使用一个因为“同时使用两种技术风格很糟糕”，所以我只用一种技术风格，因为上述原因。如果带宽不是问题，我实际上会建议使用两种技术风格，但只使用您实际使用的部分。

（我注意到有人曾经导入完整的jQuery，而他们从中使用的仅仅是$.ajax（尽管非常多但仍然如此）... 我在想...那不是过度了吗？！）- 因此，如果您使用两者并且想要保持精简，只需确保在编译时仅导入您正在使用的内容即可。按照Python的说法-永远不要使用“从模块中导入*”（无论您如何表达这个概念，Webpack / Gulp / Whomever应该为您处理大部分工作）。假设您使用ES6 / 7风格的JavaScript。