Search code examples
cssreactjsmaterial-uimaterialize

Using Materialize CSS and MaterialUI in the same React Application

I currently have a simple non-React application(HTML/Materialize/JS) that I want to convert to React and switch to using MaterialUI instead of MaterializeCss. However, I don't want to do this in one iteration. Here are the iterations I am thinking of.

  1. Convert to React(keep using Materialize)
  2. Converting some components to MaterialUI
  3. Convert remaining components to MaterialUI

The problem is, iteration 2 is only possible if we can use Materialize and MaterialUI at the same time(Some components using MaterialUI and others still using MaterializeCSS). I am wondering that the styling for materialize and MaterialUI might conflict. Has someone done this before? Any recommendations how can I achieve this?

Solution

  • An easy approach would be wrapping Materialize with React Materialize. Then you could use whatever you want from both libraries, even with the name is the same. For example:

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

    As for CSS, Material-UI has a styling solution supposed to be 'interoperable with all the other major styling solutions' (sic).

    Those styles are component scoped and automatically avoid class name clashing by making class names unique at compile time.

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

    If you decide to go that route, be aware that React Materialize is supposed to be an alternative to Material-UI for React apps. You should check the pros and cons while still in step 1. Who knows, maybe you don't even need steps 2 and 3.