React - Material UI 对比 Reactstrap

React - Material UI vs Reactstrap

我要开始一个 React 项目。我想澄清一下 Material UI 而不是 Reactstrap 的选择。 Material UI 比 Bootstrap 更好,如下图所示 . But I'm a little confused about Reactstrap after going through Pros & Cons of Material UI and Reactstrap 的另一个比较中提到的。或者我应该在同一个项目中根据要求同时使用它们吗?

我想使用现成的 UI 组件,例如可折叠的侧边菜单、带分页的表格、自动完成 Select 等

我同意关于你问题中提到的缺点的评论似乎是观点多于事实;在比较这两个包之后,我们唯一可以说的事实可能是 Material UI 有更多的内置组件。

曾经说过,在不知道项目规格的情况下很难做出决定。

我们能给您的最好建议可能就是使用您更熟悉的那个。

希望对您有所帮助。

这取决于你的选择,是的,定制有点复杂material,但外观和感觉非常出色,对于表格和所有,更好地使用Material-UI 它有内置分页,如果你觉得不舒服,你可以试试这个它还有内置分页等等 https://github.com/react-bootstrap-table/react-bootstrap-table2

参考我的经验,如果它是一个需要最少品牌的 commerial/external 项目,并且您正在寻找基本的可重用组件来创建管理门户或 CMS,我更喜欢 reactstrap/CoreUI。我主要关心的是主题覆盖。

  1. 没有足够的关于覆盖 material ui 样式的文档,很难一次又一次地编辑和测试主题设置,而reactstrap/CoreUI 允许您导入自己的 .css 文件,或覆盖其 class css。因此,当您的设计师要求时,您可以在 css 中立即更改文本字段填充。

  2. materialui和reactstrap/CoreUI都不能满足您的需求。您可以安装其他有用的 npm,如 react-select、多日期时间选择器、自动调整文本区域或颜色选择器。然后您尝试使其样式与其他 Textfield 保持一致。为像 material ui 这样的组件设置样式是 quite 很难,因为它的行为,例如标签在聚焦时缩小。但是像 reactstrap/CoreUI 这样的样式要容易得多,你甚至可以重复使用 bootstrap classname.

如果你想在没有设计师的情况下快速交付一些小东西,material ui 是一个不错的选择,涵盖你的大部分用例。如果是长期项目,设计师在看你,恐怕materialui不是一个好的选择。

无论如何,具体情况。

react-bootstrap 比 reactstrap 更受欢迎。我将谈论 react-bootstrap 和 Material UI.

我对 Material UI 有更多的经验。我什至不知道 Material UI 是如何流行起来的,而它在发布时非常糟糕。它使用内联样式,自定义任何东西都是一场噩梦。它的性能很差。尽管如此,它还是变得非常流行,并且有了很大的改进。我在我的最新项目中使用了它并且性能非常好,我在 JS 解决方案中使用了它的新 CSS 并结合了样式化组件。我认为它会比 react-bootstrap 更难使用,但它有更多开箱即用的组件。

对于大多数人来说,react-bootstrap 会是一个更容易的选择。

我不能告诉你使用哪一个,但我可以给你一些事情让你自己考虑和决定:

  1. 你更喜欢哪种设计?
  2. 如果您对 bootstrap 有更多经验,请使用 react-bootstrap。
  3. 如果您更喜欢 sass,请选择 react-bootstrap。如果您更喜欢 JS 中的 CSS,请使用 Material UI.
  4. 如果 react-bootstrap 缺少一些您需要的组件,这些组件存在于 Material UI 中,请使用 Material UI 但请记住,您可以无论如何将其他外部组件添加到您的项目中,所以我认为这可能不是限制。

我会说这是你的选择。但是,如果您擅长 bootstrap-4,最好使用 Reactstrap,这是基于组件的 React 库。

在我的公司,我们正在使用 Reactstrap,一切进展顺利。但这并不意味着我们没有使用我们自己的媒体查询和 flexbox,styled-jsx,我们显然会这样做。

即使您将使用 Reactstrap 中可用的现成组件,随着项目的进展,您将不得不使用其他库“React-Final-Forms”来有效地处理表单和表单数据与 ReactStrap 中可用的普通形式相比具有更高的性能。

同样,您将需要一个名为“React-select”的库来处理下拉菜单,这将为我提供比普通 ReactStrap select 表单组件更多的选项。

至于现在,我正在 Next.js 和 Material-UI 上做项目。我也在寻找 Bootstrap(reactstrap)/Material/Ant 之间的这种比较。我同意 Daniel Ricci 选择 Material-UI.

这是为什么?

首先,我和我更有经验的朋友谈过(他有自己的贡献(DEVExpress) React Component Library,所以他知道他在说什么)

项目管理方面的专家:

Material本身有一个very useful style guidelines from Google. So it is also not about library components, but about styles / colors / design. So you could always customize yourself and create your own theme. But as for you, it will be easier to understand why you are using Roboto:400 at H3 title, and «what color I should pick as secondary?»,如果你决定选择原色。

因此,为您的项目找到 UI/UX 设计师要容易得多。而且你总是知道你的项目应该是什么样子。

默认反应Material-UI component library is quite rich and very good described with examples. (As you may already noticed). And also there are a lot of plugin libraries components, which is ready-to-use out of the box. In my own case I was needed for a editable material react tables, and have found them in via google in 5 seconds or so。在我的项目中,表格就是一切,它们展示了产品(价格比较),所以这就是我自己选择 material 的原因。

您可以通过 google 趋势或 github 星级来比较组件库,但在您自己的情况下,可以使用:可折叠侧边菜单、带分页的表格、自动完成 Select 我会选择MaterialUI.

至于缺点,视觉上 Material 开发人员非常喜欢风格(因为它是 Android 的应用程序默认主题),有些人认为它看起来有点 丑陋,但我认为这不是问题,因为您始终可以自定义自己的主题。

如前所述,Kleo 是 :

If you have the time, dedication and resources, there is really nothing wrong with mixing them together. But you just need to think about the time/cost/benifit of it. DIY to make the end user happy, even if you mix them. Totally yourself is remaking the wheel, but you can always pull in boostrap styles etc.