<h2>Github repo</h2>
<a href="https://github.com/EntryLevelDeveloperTraining/material-ui-workshop">https://github.com/EntryLevelDeveloperTraining/material-ui-workshop</a>
<h2>Breakpoints</h2>
Breakpoints are a great way to make your website application more responsive. Material UI offers some default breakpoints for you to use, however you may override the defaults and even create your own. Breakpoints can trigger media queries in CSS and show or hide certain elements or turn on / off any CSS for that matter.
In order to create custom break points we need to create a MUI Theme object.
<pre><code class="hljs language-javascript">import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
 breakpoints: {
 values: {
 xs: 0,
 sm: 600,
 md: 960,
 lg: 1280,
 xl: 1920,
 },
 },
});</code></pre>
Then you will need to use that theme in a ThemeProvider.
<pre><code class="hljs language-javascript">export default function BoxTest() {
 return (
 &#x3C;ThemeProvider theme={theme}>
 &#x3C;Box display={{ sm: 'block' }}>Small Breakpoint&#x3C;/Box>
 &#x3C;/ThemeProvider>
 );
}</code></pre>
This will use your theme with the default values for breakpoints that you have created.
<h2>Workshop</h2>
I have created a sample workshop page that you can use to see what breakpoints are being hit at the values you have setup.
<pre><code class="hljs language-javascript">import { ThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import React from 'react';

declare module '@material-ui/core/styles/createBreakpoints' {
 interface BreakpointOverrides {
 xs: true;
 tiny: true;
 sm: true;
 md: true;
 lg: true;
 xl: true;
 // tablet: true;
 // laptop: true;
 // desktop: true;
 }
}

const theme = createMuiTheme({
 breakpoints: {
 values: {
 xs: 0,
 tiny: 300,
 sm: 550,
 md: 960,
 lg: 1280,
 xl: 1920,
 },
 },
});

interface Props {
 children: React.ReactNode;
 breakpoint: string;
}

function DisplayBox({ children, breakpoint }: Props) {
 const display = {
 xs: 'none',
 tiny: 'none',
 sm: 'none',
 md: 'none',
 lg: 'none',
 xl: 'none',
 };
 display[breakpoint] = 'block';
 return &#x3C;Box display={display}>{children}&#x3C;/Box>;
}

export default function BoxTest() {
 const breakpoints = ['xs', 'tiny', 'sm', 'md', 'lg', 'xl'];
 return (
 &#x3C;ThemeProvider theme={theme}>
 &#x3C;Box
 display="flex"
 justifyContent="center"
 alignItems="center"
 width="100vw"
 height="100vh"
 fontSize="64px"
 >
 &#x3C;Box>
 {breakpoints.map((breakpoint) => (
 &#x3C;DisplayBox breakpoint={breakpoint}>{breakpoint}&#x3C;/DisplayBox>
 ))}
 &#x3C;/Box>
 &#x3C;/Box>
 &#x3C;/ThemeProvider>
 );
}</code></pre>
<h2>Custom Name Breakpoints</h2>
You can also create custom named breakpoints.
<pre><code class="hljs language-javascript">const theme = createMuiTheme({
 breakpoints: {
 values: {
 tablet: 640,
 laptop: 1024,
 desktop: 1280,
 },
 },
});</code></pre>
However if you are using Typescript you can setup the values like this:
<pre><code class="hljs language-javascript">declare module "@material-ui/core/styles/createBreakpoints" {
 interface BreakpointOverrides {
 xs: false; // removes the `xs` breakpoint
 sm: false;
 md: false;
 lg: false;
 xl: false;
 tablet: true; // adds the `tablet` breakpoint
 laptop: true;
 desktop: true;
 }
}</code></pre>
<h2>Links</h2>
<a href="https://material-ui.com/customization/breakpoints/">https://material-ui.com/customization/breakpoints/</a>

This article will cover how to use custom breakpoints in Material UI

Material UI - Custom Breakpoints

Material UI Workshop - Grid

Material UI Workshop - Box

Material UI - Designing Media Cards

How to create a Swipeable Drawer in Material UI

Material UI - Box Breakpoints

How to create an Account Menu in Material UI

Material UI - Search Bar

How to create a Footer using Material UI

How to hide the App Bar using a scroll trigger in Material UI

Material UI - Custom Breakpoints

This course requires a subscription to view