在同一个 React 应用程序中使用 Materialize CSS 和 MaterialUI

Question

我目前有一个简单的非 React 应用程序 (HTML/Materialize/JS)，我想将其转换为 React 并改用 MaterialUI 而不是 MaterializeCss。但是，我不想在一次迭代中执行此操作。这是我正在考虑的迭代。

转换为 React（继续使用 Materialize）
正在将一些组件转换为 MaterialUI
将其余组件转换为 MaterialUI

问题是，迭代 2 只有在我们可以同时使用 Materialize 和 MaterialUI 时才有可能（一些组件使用 MaterialUI 而其他组件仍在使用 MaterializeCSS）。我想知道 materialize 和 MaterialUI 的样式可能会发生冲突。以前有人这样做过吗？有什么建议可以实现吗？

Answer 1

一个简单的方法是用 React Materialize 包装 Materialize。然后你可以使用两个库中你想要的任何东西，即使名称是相同的。例如：

import { Button as OldButton } from 'react-materialize';
import { Button } from '@material-ui/core';

至于 CSS，Material-UI 有一个 styling solution 应该是 'interoperable with all the other major styling solutions'（原文如此）。

这些样式是组件范围的，通过在编译时使 class 名称唯一来自动避免 class 名称冲突。

import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
   mainDiv: {
      display: "flex",
   },
});

export const Component = function () {
   const classes = useStyles();
   return (
      <div className={classes.mainDiv}>
          // component content
      </div>
   );
};

如果您决定走那条路，请注意 React Materialize 应该是 React 应用程序 Material-UI 的替代品。您应该在步骤 1 中检查优缺点。谁知道呢，也许您甚至不需要步骤 2 和 3。

在同一个 React 应用程序中使用 Materialize CSS 和 MaterialUI

Using Materialize CSS and MaterialUI in the same React Application

css

materialize

reactjs

material-ui