What the heck is MUI

Material UI is a React library that is created for developers based off of Google's Material Design Guidelines. Basically meaning that Google has made a cute little package for developers using react to automatically create prebuilt components for their web application.

Now if you like to design your own components down to the exact border radius pixel from the ground up.... go awf queen! However if you're like a lot of developers (over 80,000 people have starred it on GitHub!) then you like your prebuilt components because they save you time and sweet sweet keystrokes.

Someone somewhere at Google has designed google's Material Design to be user friendly and very clean and modern. I could write a whole thesis on the usage of Material UI and the many, many uses of it, however, I don't have the space here. So instead I'm going to give you a quick lil overview of just a few components that I personally find helpful to see if Material UI is the component library for you.

First off, to use Material UI you need to install it:
npm:
install npm install @mui/material @emotion/react @emotion/styled

yarn:
yarn add @mui/material @emotion/react @emotion/styled

You can do things like automatically create a wrapper container component that has margins so that your site is not the entire page wide (I added additional styling so you can actually see the container on the page):

import { Container } from "@mui/material";
function App() {
  return (
    <Container sx={{bgcolor: 'blue', height: '100vh', fontSize: '100px'}}>
      Wassup!</Container>
    )
  }

and that looks like this:

One cool thing about Material UI components is that they are responsive by default! So if you move the page larger and smaller, the components will adjust.

You can also import a typography component, which will give you a default font and sizing. You can make it different header size by using the variant prop:

import { Container, Typography } from "@mui/material";
function App() {
  return (
    <Container sx={{bgcolor: 'blue', height: '100vh'}}>
      <Typography variant='h1'>Wassup</Typography>
    </Container>
    )
  }

Resulting in:

SX is material UI's specific style prop. It allows you to do inline styling that is abbreviated (bgcolor for background color, p for padding, m for margin, py for padding top and bottom, or px for padding right and left. This is really just beneficial if you're a fan of inline styling and some people like it because they think it allows them to code quicker. SX also allows you to add hover, focus, before and after styling in line, which is not available with JSX's style prop.

Buttons are another popular Material UI component as well. Here is an example of three different kinds of buttons that Material UI offers:

import { Container, Typography, Button } from "@mui/material";

function App() {
  return (
    <Container sx={{bgcolor: 'white', height: '100vh'}}>
      <Typography variant='h1'>Wassup</Typography>
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Container>
    )
  }

Looking like this:

Another fun component that Material UI gives us is their Paper component. Material UI's paper component is their version of a Card. It automatically gives us a quick way to elevate the cards off of the page. Here is some example code:

function App() {
  return (
    <div>
      <Typography variant='h1' color="primary">Wassup</Typography>
      <Box
        sx={{
          display: 'flex',
          flexWrap: 'wrap','& > :not(style)': {
            m: 1,
            width: 128,
            height: 128,
            backgroundColor: 'lightgrey'
            },
}}
      >

      <Paper elevation={0} />
      <Paper />
      <Paper elevation={5} />
      </Box>

  </div>
  )
}

export default App;

Looking like:

Another cool thing about Material UI is that you can create Theme's for your application so the overall design is cohesive with importing ThemeProvider. By specifying a theme, you can control various aspects of your UI, such as colors, typography, spacing, breakpoints, and more. The theme defines a set of predefined values and styles that can be easily accessed and used throughout your application.

Just import ThemeProvider from "@mui/material" in your 'index.js' file. Wrap your App component in your so the entire wrap will have access to it. Then you can import any custom styling that you want to repeat in any component by importing the useTheme hook:

import { useTheme } from '@mui/material/styles';

function DeepChild() {
  const theme = useTheme();
  return <span>{`spacing ${theme.spacing}`}</span>;
}

This code block has custom spacing from the theme that we've already established. You can also specify 'primary' and 'secondary' colors that you can easily plop into your code by using sx={{ color = 'primary'}}. Themes may seem like overkill, but you can imagine that in a project with multiple components and files, and multiple engineers working on it, having a common theme may be easier than individually adding classes and styling in CSS.

Material UI also provides you with an interactive them builder that you can use to help see what your site will look like with different themes.

Overall, if you want to code a product quickly and with clean and modern design that is pretty plug and play then material UI is the right fit for you. Especially if you're trying to create a quick prototype or first pass of a project. But if you're looking for something highly customizable and you want to put your finger print on every component, then maybe a DIY code is for you!

Resources:
https://mui.com/material-ui/