🚀 Feature: Overriding breakpoints in `UnifiedTheme`

[graynk]

🔖 Feature description

When Backstage used MUI v4 it was possible to override breakpoints like so:

function createTheme(options: SimpleThemeOptions): BackstageTheme {
  const themeOptions = createThemeOptions(options);
  themeOptions.breakpoints = {
    ...themeOptions.breakpoints,
    values: {
      xs: 0,
      sm: 800,
      md: 1800,
      lg: 2100,
      xl: 4000,
    },
  };
  const baseTheme = createMuiTheme(themeOptions) as BackstageTheme;
  const overrides = createThemeOverrides(baseTheme);
  const theme = { ...baseTheme, overrides };
  return theme;
}

In the UnifiedTheme this seems to be no longer possible. I can see that I can provide some styleOverrides, but the following example still does not work:

MuiGrid: {
  styleOverrides: {
    root: ({ theme }) => ({
            [theme.breakpoints.values.xs]: 0,
            [theme.breakpoints.values.sm]: 800,
            [theme.breakpoints.values.md]: 1800,
            [theme.breakpoints.values.lg]: 2100,
            [theme.breakpoints.values.xl]: 4000,
    }),
  },
},

🎤 Context

In our use-case we have users with either a small Mac screen, or an ultra-wide monitor and some Entity pages scale really badly on these set ups. We would like to be able to override breakpoints to have more control over the layout of the page. Considering MUI itself supports it as a feature it should just be a matter of allowing the correct options to be passed on to the constructor.

✌️ Possible Implementation

No response

👀 Have you spent some time to check if this feature request has been raised before?

• [X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• [X] I have read the Code of Conduct

Are you willing to submit PR?

Yes I am willing to submit a PR!

[benjdlambert]

Can you try not passing a function as the value for root and hard code some values instead? Does this work? I seem to remember there being as issue with overriding using functions. Might need to pass styleOverrides as a function instead.

[graynk]

@benjdlambert I can certainly try it, but I'm not entirely sure where in the styleOverrides to hardcode the breakpoints, or what the signature for the styleOverrides would be if I were to pass it as a function. I tried to go through the types, but it didn't really clear things up for me:

export type ComponentsOverrides<Theme = unknown> = {
  [Name in keyof ComponentNameToClassKey]?: Partial<
    OverridesStyleRules<ComponentNameToClassKey[Name], Name, Theme>
  >;
} & {
  MuiCssBaseline?: CSSObject | string | ((theme: Theme) => CSSInterpolation);
};

With the theme object it's clear for me where to set the values, but theme is not part of the styleOverrides object.

Also someone on Discord mentioned that

I don't think this was considered so I'm not surprised this doesn't work. Could you log an issue for this, please?