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

Question

我目前有一个简单的非 React 应用程序（HTML/Materialize/JS），我想将其转换为 React 并切换到使用 MaterialUI 而不是 MaterializeCss。但是，我不想在一次迭代中做到这一点。这是我正在考虑的迭代。

1. 转换为 React（继续使用 Materialize）
2. 将一些组件转换为 MaterialUI
3. 将剩余组件转换为 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 应该可以“与所有其他主要样式解决方案互操作”（原文如此）。

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

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 步。