Expose theme for mixins

[o-alexandrov]

Summary

There are 2 problems:

1. Currently mixins type is part of ThemeOptions in:

material-ui/packages/mui-material/src/styles/createThemeNoVars.d.ts

Line 35 in 2359c0b

export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'>, CssVarsOptions {

It's a duplicate as mixins already exists in:

material-ui/packages/mui-system/src/createTheme/createTheme.d.ts

Line 27 in 2359c0b

mixins?: Mixins;

2. mixins expects an object; it should also allow to pass a function (theme) => mixins
   • currently, when using with CSS variables, you don't have access to the MUI CSS variables' names. i.e. I can't define theme.vars.palette-dependent styles in mixins, because there's no built-in way to access them

Motivation

Similar to components[COMPONENT_NAME].styleOverrides.root, It should be possible to set:

mixins: ({ theme }) => ({
  myExampleMixin: {
    border: `1px solid ${theme.vars.palette.primary.main`,
    // ...myOtherStyles
  }
})

Search keywords: theme, mixins