extend Mui Typescript breakpoints in typescript

Question

Getting a typescript error when trying to use custom names for breakpoint values:

Type '{ mobile: number; tablet: number; desktop: number;}' is not assignable to type '{ xs: number; sm: number; md: number; lg: number; xl: number; }'.
  Object literal may only specify known properties, and 'mobile' does not exist in type '{ xs: number; sm: number; md: number; lg: number; xl: number; }'.

Here is my ThemProvider

import { ThemeProvider, createTheme } from "@mui/material/styles";

<ThemeProvider
  theme={createTheme({
    breakpoints: {
      values: {
        mobile: 480,
        tablet: 750,
        desktop: 1076,
      },
    },
  })}

I tried adding a declaration file but then I got the error on import saying Module '"@mui/material/styles"' has no exported member 'ThemeProvider'. Module '"@mui/material/styles"' has no exported member '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;
    laptop: true;
    desktop: true;
  }
}

Lerry Klitzke · Accepted Answer · 2024-04-30 12:41:43Z

1

Wrap declare module "@mui/material/styles" inside declare global

declare global {
  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;
    }
  }
}

answered Apr 30, 2024 at 12:41

Lerry Klitzke

311 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

SwankTheTank · Accepted Answer · 2023-11-10 15:53:22Z

This has been a min but was addressing this as well. Looks like this answer has the key. We will have to adjust for the new mui folder structure though.

import { BreakpointOverrides } from '@mui/system/createTheme/createBreakpoints';

declare module '@mui/system/createTheme/createBreakpoints' {
  interface BreakpointOverrides {
    xs: false;
    sm: false;
    md: false;
    lg: false;
    xl: false;
    mobile: true;
    tablet: true;
    laptop: true;
    desktop: true;
    desktopApp: true;
    largeDesktop: true;
  }
}

declare module '@mui/material/styles/createTheme' {
  interface ThemeOptions {
    breakpoint?: BreakpointOverrides;
  }
}

// ...

const theme = {
  // ...
  breakpoints: {
    values: {
      desktopApp: 1024,
      mobile: 0,
      tablet: 481,
      laptop: 768,
      desktop: 1024,
      largeDesktop: 1200,
    },
  },
  // ...
};

Collectives™ on Stack Overflow

extend Mui Typescript breakpoints in typescript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related