Adding custom breakpoints to material ui with typescript

Question

I know that in the createMuiTheme() function you are able to update the values of the breakpoints like so.

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

I also know that Material UI (relatively) recently changed it where you can add custom values for breakpoints.

  breakpoints: {
    values: {
      tablet: 640,
      laptop: 1024,
      desktop: 1280,
    },
  },
});

However, I am using Typescript and I can't get it to work by overriding the breakpoint values as they explain here:

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

and instead get this error Type '{ tablet: number; laptop: number; desktop: number; }' is not assignable to type 'BreakpointValues'. Object literal may only specify known properties, and 'tablet' does not exist in type 'BreakpointValues'.

Not sure what I am doing wrong? Any help would be appreciated.

I'm having this exact same issue. Did you ever figure it out? — Jared Smith
– Jared Smith, Commented Jun 19, 2020 at 15:01
Nope. I moved on but I would like to know answer so I can go back and fix. — Yoni Silverman
– Yoni Silverman, Commented Jun 20, 2020 at 17:02
Hello there, if you are using typescript and you want to declare a module , then don't go nesting. Just do as mentioned ( this is for MUI v5.10.14) declare module '@mui/material/styles' { interface BreakpointOverrides { xs: false; // removes the xs` breakpoint sm: false; md: false; lg: false; xl: false; mobile: true; // adds the mobile breakpoint tablet: true; laptop: true; desktop: true; } }` const theme = createTheme({ breakpoints : { values : { ... your custom values }}}) — Himanshu Sharma
– Himanshu Sharma, Commented Nov 20, 2022 at 14:41

Jaox · Accepted Answer · 2020-06-27 03:38:33Z

I am working with typescript and breakpoints MaterialUI, I think you need to import and modify some interface as documentation says (https://material-ui.com/guides/typescript/#customization-of-theme). So for example I have a Theme.tsx like this:

import { createMuiTheme } from '@material-ui/core/styles'
import {BreakpointOverrides} from "@material-ui/core/styles/createBreakpoints"

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


declare module '@material-ui/core/styles/createMuiTheme' {
  interface Theme {
    appDrawer: {
      width: React.CSSProperties['width']
      breakpoint: BreakpointOverrides
    }
  }
  // allow configuration using `createMuiTheme`
  interface ThemeOptions {
    appDrawer?: {
      width?: React.CSSProperties['width']
      breakpoint?: BreakpointOverrides
    }
  }
}
export const theme = createMuiTheme({
  breakpoints: {
    values: {
      tablet: 400,
      laptop: 900,
      desktop: 1200
    }
  },})

Siyabonga Thwala · Accepted Answer · 2022-11-16 14:08:26Z

I've been struggling with this issue for a while but I think I've found a working way to change/customize the breakpoints globally with ThemeOptions.

//themeOptions.ts
import { ThemeOptions } from "@mui/material/styles/createTheme";

declare module "@mui/material/styles" {
  interface BreakpointOverrides {
    xs: false; // removes the `xs` breakpoint
    sm: false;
    md: false;
    lg: false;
    xl: false;
    mobile: true; // adds the `mobile` breakpoint
    tablet: true;
    desktop: true;
  }
}

export const themeOptions: ThemeOptions = {
  breakpoints: {
    values: {
      mobile: 0,
      tablet: 650,
      desktop: 1200
    }
  }
};

//demo.tsx
import { useTheme, useMediaQuery } from "@mui/material";
export default const Demo = () => {
  const theme = useTheme();
  const mobile = useMediaQuery(theme.breakpoints.down("mobile"));
  const mobileContent: JSX.Element = (<Box sx={{ bg: {mobile: "#000"}, color: "#fff" }}> Mui breakpoint mobile</box>);
  
  const otherContent: JSX.Element = (<Box sx={{ bg: {tablet: "#fff"}, color: "red" }}> Mui breakpoint not mobile</box>);
  
  return {mobile ? mobileContent : otherContent}
}

//app.tsx
import * as React from "react";
import ReactDOM from "react-dom";
import { createTheme, ThemeProvider, } from "@mui/material";
import { themeOptions } from "./themeOptions";
import Demo from "./demo";

const App = () => {
  <ThemeProvider theme={createTheme(themeOptions)}>
    <Demo/>
  </ThemeProvider>
}
const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <CssBaseline />
      <App/>
  </React.StrictMode>,
  rootElement
);

bcjohn · Accepted Answer · 2020-07-02 09:07:27Z

0

I found the problems is due to the version of material-ui. The 4.9.9 version of @material-ui/core would cause the error messages. When I update to 4.11.0, it work correctly.

answered Jul 2, 2020 at 9:07

bcjohn

2,54315 silver badges30 bronze badges

1 Comment

bcjohn Over a year ago

You can find the issue was fixed in 4.9.14, [theme] Fix override breakpoints (#20901) @JasonHK showed in material-ui/releases

Collectives™ on Stack Overflow

Adding custom breakpoints to material ui with typescript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related