Material UI - Custom Breakpoints

Github repo

https://github.com/EntryLevelDeveloperTraining/material-ui-workshop

Breakpoints

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.

import { createMuiTheme } from '@material-ui/core/styles';

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

Then you will need to use that theme in a ThemeProvider.

export default function BoxTest() {
  return (
    <ThemeProvider theme={theme}>
       <Box display={{ sm: 'block' }}>Small Breakpoint</Box>
    </ThemeProvider>
  );
}

This will use your theme with the default values for breakpoints that you have created.

Workshop

I have created a sample workshop page that you can use to see what breakpoints are being hit at the values you have setup.

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 <Box display={display}>{children}</Box>;
}

export default function BoxTest() {
  const breakpoints = ['xs', 'tiny', 'sm', 'md', 'lg', 'xl'];
  return (
    <ThemeProvider theme={theme}>
      <Box
        display="flex"
        justifyContent="center"
        alignItems="center"
        width="100vw"
        height="100vh"
        fontSize="64px"
      >
        <Box>
          {breakpoints.map((breakpoint) => (
            <DisplayBox breakpoint={breakpoint}>{breakpoint}</DisplayBox>
          ))}
        </Box>
      </Box>
    </ThemeProvider>
  );
}

Custom Name Breakpoints

You can also create custom named breakpoints.

const theme = createMuiTheme({
  breakpoints: {
    values: {
      tablet: 640,
      laptop: 1024,
      desktop: 1280,
    },
  },
});

However if you are using Typescript you can setup the values like this:

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;
  }
}

Links

https://material-ui.com/customization/breakpoints/