[theme] Give same treatment to custom mixins as internal createMixins (as done with createTypography)

[maeertin]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

export default function createMixins(breakpoints, spacing, mixins) {
  return {
    toolbar: {
      minHeight: 56,
      [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
        minHeight: 48,
      },
      [breakpoints.up('sm')]: {
        minHeight: 64,
      },
    },
    ...(typeof mixins === 'function' ? mixins(breakpoints, spacing) : mixins),
  };
}

Update https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/createMixins.js so that it forwards createMixins arguments to the "mixinsInput" if passed as a function to createTheme. Suggestion added above.

Examples 🌈

https://github.com/mui/material-ui/blob/4eef029981b08c77a9c52d0b863e6b5ced279087/packages/mui-material/src/styles/createTypography.js#L32 createTypography is already set up in this this way.

Motivation 🔦

For the same reason that the internal mui createMixins has access to breakpoints/spacing, I think that theme creators should have the same possibilities when creating custom mixins.

For example:

const theme = createTheme({
  mixins: (breakpoints, spacing) => ({
    myCustomGuttersMixin: {
      paddingLeft: spacing(2),
      paddingRight: spacing(2),
      [breakpoints.up('sm')]: {
        paddingLeft: spacing(4),
        paddingRight: spacing(4),
      },
    }
  })
})

[mnajdova]

Looks like an interesting proposal. However, in order for creating a custom mixin, I would expect you may need more things from the theme (maybe the whole resolved theme actually). My proposal would be doing something like this: https://codesandbox.io/s/sweet-microservice-htiq4r?file=/src/App.tsx

You can also use the proposal from this section - https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme for example using the second arg in createTheme, although for this scenario that you have the codesandbox example should be enough.

While doing the codesandbox, I noticed that we probably want to export the Mixins type from @mui/material/styles directly, so that developers don't need to know our internals.

[maeertin]

Hi there :) That's actually what I'm currently doing but only needing breakpoints & spacing, but was worth a shot as a proposal. Thanks for the help!