materialize-css 和 Material UI 的区别

Posted 2023-02-22

【中文标题】materialize-css 和 Material UI 的区别

【英文标题】：Difference between materialize-css and material UI

【发布时间】：2019-03-01 18:49:18

【问题描述】：

我浏览了materializecss和materialUI的主页。第一个提到基于 Material Design 的现代响应式前端框架，后一个提到实现 Google 的 Material Design 的 React 组件。他们都实现了材料设计，他们都给了我使用的组件。两者的区别到底在哪里？

【参考方案1】：

materialize 和 material UI 都实现了 Google 的 Material Design 但是以两种不同的方式。例如网格系统是差异之一。

正如其文档中提到的材料 UI 一样，materialize 有以下区别：

1- Materialize 比 Material-UI 支持更广泛的浏览器，例如，它们支持 IE 10 而我们只支持 IE 11。只支持 IE 11 可以让我们充分利用 flexbox 布局。 IE 10 的 flexbox 存在很多问题。

2- Materialise 使用 SCSS，这是一种样式架构 Material-UI 从 2 年前移走。 (https://material-ui.com/getting-started/comparison/#materialize)

尽管 Material UI 是最流行的 React 组件库，因为它拥有大量的 React 组件。

gem、meteor 和 ember 等社区有能力将 Materialise 纳入他们的项目。

我有使用 angularjs 实现物化的经验。 materialize 提供了在 angularjs (https://krescruz.github.io/angular-materialize/) 中使用 materializecss 功能的指令。它们中的大多数都可以正常工作，但input-field 指令会导致应用程序性能出现问题。

【讨论】：

你能详细解释一下如何在没有jQuery但在vanillaJS的帮助下在React中使用materializeCSS的Js函数如caraousel、sidenav等

@GermaVinsmoke 抱歉，我没有使用 React 的经验。

我可以在我的 React 项目中同时使用它们吗？抱歉这个问题太主流了。

是的，从技术上讲，您可以在项目中同时使用它们，但可能会发生一些冲突并且某些组件无法正确显示。我认为其中一个就足够了，您可以自定义想要更改的组件