Material UI

Intro

Material UI

Material UI is an open-source React component library that implements Google’s Material Design.

It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box and features a suite of customization options that make it easy to implement your own custom design system on top of our components.

• MUI gives you prebuilt components (e.g. Button, Dialog, Snackbar, Autocomplete, Tooltip, Drawer, AppBar, etc.)
  • All styled and responsive out-of-the-box, with accessibility and keyboard support
• Built-in theming
  • Define brand colors, fonts, spacing once in theme.ts
  • Apply them everwhere via MUI’s ThemeProvider

Getting Started

Install dependencies

• Install @mui/material @emotion/react @emotion/styled

npm install @mui/material @emotion/react @emotion/styled

package.json

"@mui/material": "7.1.2",
"@emotion/styled": "11.14.0",
"@emotion/react": "11.14.0"

React Button Component

• https://mui.com/material-ui/react-button/#text-buttons
• https://mui.com/material-ui/getting-started/usage/

import * as React from 'react';
import Button from '@mui/material/Button';
 
export default function ButtonUsage() {
  return <Button variant="contained">Hello world</Button>;
}

Theming

Default Theme

Shows how the theme object looks like with the default values

Default Theme

Pallete

https://mui.com/material-ui/customization/palette/

CreateTheme

Generate a theme base on the options received. Then, pass it as a prop to ThemeProvider.

CreateTheme

import { createTheme } from '@mui/material/styles';
import { green, purple } from '@mui/material/colors';
 
const theme = createTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: green[500],
    },
  },
});

ThemeProvider

This component takes a theme prop and applies it to the entire React tree that it is wrapping around. It should preferably be used at the root of your component tree.

ThemeProvider

import * as React from 'react';
import { red } from '@mui/material/colors';
import { ThemeProvider, createTheme } from '@mui/material/styles';
 
const theme = createTheme({
  palette: {
    primary: {
      main: red[500],
    },
  },
});
 
function App() {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
}

Typography

• https://mui.com/material-ui/customization/typography/
• Typography API

Comes with default fonts and sizes built in based on Material Design guidelines

Overwrite MUI styles

https://mui.com/material-ui/customization/how-to-customize/

sx prop

The sx prop is the best option for adding style overrides to a single instance of a component in most cases. It can be used with all Material UI components.

• 8px spacing units

UseStyles

UseStyles

import { makeStyles } from "tss-react/mui";
 
const useStyles = makeStyles()({
  helloThereStyle: {
    fontStyle: "oblique",
    color: "red",
    fontSize: "30px",
  },
  buttonStyle: {
    background: "purple",
    border: 50,
  },
});

Paper

The Paper component is a container for displaying content on an elevated surface.

Paper

In Material Design, surface components and shadow styles are heavily influenced by their real-world physical counterparts.

Material UI implements this concept with the Paper component, a container-like surface that features the elevation prop for pulling box-shadow values from the theme.

MUI Tutorial #2

Component	Role
<Box>	A generic, highly flexible layout wrapper (like a styled <div>). Great for setting background color, centering, flex layout, full-page height, etc.
<Container>	A content wrapper that limits the width (e.g., to 600px or 960px) and adds horizontal padding. It helps keep your content from stretching edge-to-edge on wide screens.

Modal Demo

A side-by-side comparison of creating a button that opens a modal

Plain CSS + HTML (React)

React + MUI

Videos

• https://mui.com/joy-ui/react-card/#card-layers
• See HTML video

<Box>
  <video
    autoPlay
    loop
    muted
    poster="https://assets.codepen.io/6093409/river.jpg"
  >
    <source
      src="https://assets.codepen.io/6093409/river.mp4"
      type="video/mp4"
    />
  </video>
</Box>