Unable to customise theme breakpoints

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

No longer able to customise theme breakpoints.

Expected Behavior 🤔

Be able to import the BreakpointOptions type from core and use it to pass in custom breakpoints to theme.

Steps to Reproduce 🕹

https://codesandbox.io/s/basicalerts-material-demo-forked-7qnte?file=/demo.tsx:9-27

import { BreakpointsOptions } from "@material-ui/core/styles/createBreakpoints";

const getBreakpoints = (theme: CustomerUITheme): BreakpointsOptions => ({
    values: theme.breakpoints,
});

shows error Cannot find module '@material-ui/core/styles/createBreakpoints

there doesn’t appear to be any error passing breakpoints into the createTheme function, and i believe createBreakpoints has moved to the system package. Do we need to install @material-ui/system to be able to use the BreakpointsOptions type?

[eps1lon]

I thought that we should support up to level 3, otherwise we are making public the folder structure that we have internally, which with changes like this will break confused

I wanted to say that we should make it public via public path. So re-export it from something at level 2 or 3. Not tell people to export from level >=4

[oliviertassinari]

The proposed patch looks great. I would even not make BreakpointValues public but and inline it for consistency with the other keys:

diff --git a/packages/material-ui-system/src/createTheme/createBreakpoints.d.ts b/packages/material-ui-system/src/createTheme/createBreakpoints.d.ts
index 6389985a74..3a9544acb7 100644
--- a/packages/material-ui-system/src/createTheme/createBreakpoints.d.ts
+++ b/packages/material-ui-system/src/createTheme/createBreakpoints.d.ts
@@ -6,12 +6,11 @@ export type Breakpoint = OverridableStringUnion<
   'xs' | 'sm' | 'md' | 'lg' | 'xl',
   BreakpointOverrides
 >;
-export type BreakpointValues = { [key in Breakpoint]: number };
 export const keys: Breakpoint[];

 export interface Breakpoints {
   keys: Breakpoint[];
-  values: BreakpointValues;
+  values: { [key in Breakpoint]: number };
   up: (key: Breakpoint | number) => string;
   down: (key: Breakpoint | number) => string;
   between: (start: Breakpoint | number, end: Breakpoint | number) => string;

---

Regarding the side questions. @material-ui/core/styles/createBreakpoints was never allowed as an import path (AFAIK). It’s private. With #26254 we can enforce to make them unreachable.