Использование Materialize CSS и MaterialUI в одном приложении React

Question

В настоящее время у меня есть простое приложение, не поддерживающее React (HTML / Materialize / JS), которое я хочу преобразовать в React и переключиться на использование MaterialUI вместо Materialize Css. Однако я не хочу делать это за одну итерацию. Вот итерации, о которых я думаю.

1. Convert to React (продолжайте использовать Materialize)
2. Преобразование некоторых компонентов в MaterialUI
3. Преобразование оставшихся компонентов в MaterialUI

Проблема в том, что итерация 2 возможна только в том случае, если мы можем использовать Materialize и MaterialUI одновременно (некоторые компоненты используют MaterialUI, а другие все еще используют Materialize CSS). Мне интересно, что стили для материализации и MaterialUI могут конфликтовать. Кто-нибудь делал это раньше? Любые рекомендации, как я могу этого добиться?

Answer 1

Легче всего было бы обернуть Materialize с помощью React Materialize . Тогда вы можете использовать все, что хотите, из обеих библиотек, даже если имя будет одинаковым. Например:

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

Что касается CSS, у Material-UI есть стилизованное решение должно быть «совместимо со всеми другими основными стилистическими решениями» (si c) .

Эти стили являются компонентами области видимости и автоматически избегают конфликтов имен классов, делая имена классов уникальными во время компиляции.

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>
   );
};

Если вы решите go этот маршрут, имейте в виду, что React Предполагается, что Materialize станет альтернативой Material-UI для приложений React. Вы должны проверить все «за» и «против» еще на шаге 1. Кто знает, может быть, вам даже не нужны шаги 2 и 3.