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。我主要关心的是主题覆盖。
没有足够的关于覆盖 material ui 样式的文档,很难一次又一次地编辑和测试主题设置,而reactstrap/CoreUI 允许您导入自己的 .css 文件,或覆盖其 class css。因此,当您的设计师要求时,您可以在 css 中立即更改文本字段填充。
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 会是一个更容易的选择。
我不能告诉你使用哪一个,但我可以给你一些事情让你自己考虑和决定:
- 你更喜欢哪种设计?
- 如果您对 bootstrap 有更多经验,请使用 react-bootstrap。
- 如果您更喜欢 sass,请选择 react-bootstrap。如果您更喜欢 JS 中的 CSS,请使用 Material UI.
- 如果 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.
我要开始一个 React 项目。我想澄清一下 Material UI 而不是 Reactstrap 的选择。 Material UI 比 Bootstrap 更好,如下图所示
我想使用现成的 UI 组件,例如可折叠的侧边菜单、带分页的表格、自动完成 Select 等
我同意关于你问题中提到的缺点的评论似乎是观点多于事实;在比较这两个包之后,我们唯一可以说的事实可能是 Material UI 有更多的内置组件。
曾经说过,在不知道项目规格的情况下很难做出决定。
我们能给您的最好建议可能就是使用您更熟悉的那个。
希望对您有所帮助。
这取决于你的选择,是的,定制有点复杂material,但外观和感觉非常出色,对于表格和所有,更好地使用Material-UI 它有内置分页,如果你觉得不舒服,你可以试试这个它还有内置分页等等 https://github.com/react-bootstrap-table/react-bootstrap-table2
参考我的经验,如果它是一个需要最少品牌的 commerial/external 项目,并且您正在寻找基本的可重用组件来创建管理门户或 CMS,我更喜欢 reactstrap/CoreUI。我主要关心的是主题覆盖。
没有足够的关于覆盖 material ui 样式的文档,很难一次又一次地编辑和测试主题设置,而reactstrap/CoreUI 允许您导入自己的 .css 文件,或覆盖其 class css。因此,当您的设计师要求时,您可以在 css 中立即更改文本字段填充。
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 会是一个更容易的选择。
我不能告诉你使用哪一个,但我可以给你一些事情让你自己考虑和决定:
- 你更喜欢哪种设计?
- 如果您对 bootstrap 有更多经验,请使用 react-bootstrap。
- 如果您更喜欢 sass,请选择 react-bootstrap。如果您更喜欢 JS 中的 CSS,请使用 Material UI.
- 如果 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.