My First React App » Add Material UI Component Library

My First React App » Add Material UI Component Library

Add Material UI Component Library

MaterialUI is a nice and quite complete Component Library for React. You can build so much with the out-of-the-box components, and it offers a quite extensive customization API.

In a normal React App you would follow the MUI tutorial to set it up, and you would have to wrap your Root Component with the MUI Provider.

Long story short, it would take some coding.

In a ForrestJS React App thing are much different, as the only thing you would need is to add the relative service react-mui:

// Import the service:
import reactMUI from '@forrestjs/react-mui';

// Just add the service:
forrest.run({
  services: [reactRoot, reactMUI],
});

Well, you also have to (optionally) import the Roboto font in your /public/index.html:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

Use a MUI Component

🧐 How do I know it works for real?

That's a fair question. Let's modify our basic Feature so to actually use a MUI Component.

First let's import a few MUI Components:

import Box from '@material-ui/core/Box';
import Link from '@material-ui/core/Link';
import Typography from '@material-ui/core/Typography';

And then let's use them in our custom Root Component:

const MyComponent = () => (
  <Box sx={{ margin: 5 }}>
    <Typography>My First React App - with MaterialUI</Typography>
    <Link href="https://mui.com" color="primary" variant="body2">
      Open MUI Documentation
    </Link>
  </Box>
);

const customRoot = {
  target: '$REACT_ROOT_COMPONENT',
  handler: { component: MyComponent },
};