Arbitrary scaling of the MUI default theme

[pingnikhil]

Hi,

My application needs a highly compact, almost a miniaturized version of the default MUI theme.

I've read the customization/theming sections of the official MUI docs a few times already but it still isn't clear what the minimum set of styles along with their values is that the new theme must include or override so that it can uniformly scale all components and their subcomponents down (or even up, if needed!) by an arbitrary scaling factor, 'S'.

Because most components are composed of subcomponents, the scaled theme should also appropriately reposition (and adjust all aspects of) the latter as a function of S, as also e.g. any and all margins and paddings (or, gaps in case of flex containers).

For example, when a TextField is scaled down, its input labels, helper text etc would need not only scaling but also a little repositioning to preserve an aspect of the aesthetics offered in the MUI default theme.

Would greatly appreciate if someone could:

1. Either make available a parameterized version of the default theme that covers all MUI and MUI X components;

2. Or share complete and detailed guidance on how to do this oneself -- for all components and subcomponents -- especially, if one isn't familiar with the internals of all MUI/X components!

Regards,
NS

Order ID: 111292

Search keywords:

[siriwatknp]

I'll create an experiment page and share with you.

[pingnikhil]

@siriwatknp May I ask when will this experiement page be ready by?
Also, does "experiment" page mean that it won't be the final solution?

Regards,
NS

[siriwatknp]

@siriwatknp May I ask when will this experiement page be ready by?
Also, does "experiment" page mean that it won't be the final solution?

At the moment, there is no global config that will flip all components to miniature size. However, some components have size prop that you can set to the lowest value as default using theme.

@pingnikhil The first step is to follow the density docs to make the default components into small size.

For the rest of the component, it has to be configured to the theme one-by-one through theme.styleOverrides:

createTheme({
  components: {
    MuiAccordion: {
      styleOverrides: { … }
    }
  }
})

Next step, if you need smaller size than small, here is the example of adding mini size to the Button: https://stackblitz.com/edit/react-xcut7zwl?file=Demo.tsx