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.

Material UI x Base UI

Material UI and Base UI feature many of the same UI components, but Base UI comes without any default styles or styling solutions.

Base UI, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, future versions of Material UI will use Base UI components and hooks for its foundational structure.

Setup

Quick Intro

• React and React DOM are peer dependencies
• Material UI uses Emotion as its default styling engine.
• But we can use with Styled Components

Installation

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

Usage

We can starting using MUIs Components right away But we wouldn't have the MUI's default Font working. It uses Roboto, the font-family is already set with the correct value, but we need to install the font:

1. Install Roboto via NPM and bundle the font.
2. Import Roboto via CDN e.g Google Fonts

Using via Google Fonts

1<link rel="preconnect" href="https://fonts.googleapis.com" />
2<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
3<link
4  rel="stylesheet"
5  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
6/>

Using via NPM Package

1yarn add @fontsource/roboto

Then we can import it in our App TS/TSX

Now can already start coding UIs with Material UI! But, from now on, let's enhance our knowledge about MUI as much as possible. Let's start filling the real world needs of a Web App.

Breakpoints

1. Create a theme and provide it to the App
2. Customize the App's theme: It's very likely we'll need to target different screens sizes than the MUI's default values. We just need to chose if we're keeping the breakpoints abbreviations like "xs", "md" ..., or if we're going to use different words like "mobile", "tablet", "desktop".

In case there's no naming changing:

1const theme = createTheme({
2  breakpoints: {
3    values: {
4      xs: 0,
5      sm: 767,
6      md: 768,
7      lg: 1439,
8      xl: 1440,
9    },
10  },
11});

In case there is naming changing:

1const theme = createTheme({
2  breakpoints: {
3    values: {
4      xs: 0,
5      sm: 767,
6      md: 768,
7      lg: 1439,
8      xl: 1440,
9    },
10  },
11});

If we're using Typescript, we can extend the default theme; Let's set a global declaration file to hold all the extensions we need. Further, we can better organize the .d files:

tsconfig.json

1	"include": ["...", "global.d.ts"],

global.d.ts

1declare module "@mui/material/styles" {
2  interface BreakpointOverrides {
3    xs: false;
4    sm: false;
5    md: false;
6    lg: false;
7    xl: false;
8    mobile: true;
9    tablet: true;
10    laptop: true;
11    desktop: true;
12  }
13}

Custom Fonts

We'll like have to change the default font-family. We can do it setting it on the custom theme:

1const theme = createTheme({
2  typography: {
3    fontFamily: "Libre Baskerville',Montserrat Variable, sans-serif",
4  },
5});

Icons

Via package

1yarn add @mui/icons-material

Via Google Fonts

1<link
2  rel="stylesheet"
3  href="https://fonts.googleapis.com/icon?family=Material+Icons"
4/>

"We do not recommend using this approach in production. It requires the client to download the entire library—regardless of which components are actually used—which negatively impacts performance and bandwidth utilization."

Reset / Normalization

Server Side Rendering (SSR)

Disbale Media Queries on SSR for MUI components

1const theme = createTheme({
2  components: {
3    MuiUseMediaQuery: {
4      defaultProps: {
5        noSsr: true,
6      },
7    },
8  },
9});

Issues

Customization of Breakpoints