[core] Fix mixins not being assignable as JSS styles

[ririvas]

• I have followed (at least) the PR section of the contributing guide.

This pull request reverts one of the changes made in #19263 and addresses #19362 .

The intent of original pull request was to avoid using the CSS-in-JS (JSS) implementation specific "CSSProperties" type where the simpler React.CSSProperties can be used. However, createMixins does directly rely on ability to specify media query nested selectors, a feature not present in React.CSSProperties

This change allows us to continue to override the toolbar implementation in Typescript. Whereas it is supported in vanilla JS.

const theme = createMuiTheme({
        mixins: {
            toolbar: {
                background: '#fff',
                minHeight: 36,
                '@media (min-width:0px) and (orientation: landscape)': {
                    minHeight: 24
                },
                '@media (min-width:600px)': {
                    minHeight: 48
                }
            },
        }
    });

[ririvas]

This change will fix an error a couple users reported when attempting to use theme.mixins.toolbar as a CSSProperties object.

const useStyles = makeStyles(theme => ({
    appBarSpacer: theme.mixins.toolbar,
}));

However, in #19263, the following change was made to allow React.CSSProperties to be assigned to the internal type CSSProperties.

export interface CSSProperties extends BaseCSSProperties {
  // Allow pseudo selectors and media queries
  // `unknown` is used since TS does not allow assigning an interface without
  // an index signature to one with an index signature. This is to allow type safe
  // module augmentation.
  // Technically we want any key not typed in `BaseCSSProperties` to be of type
  // `CSSProperties` but this doesn't work. The index signature needs to cover
  // BaseCSSProperties as well. Usually you would use `BaseCSSProperties[keyof BaseCSSProperties]`
  // but this would not allow assigning React.CSSProperties to CSSProperties
  [k: string]: unknown | CSSProperties;
}

In other words, while this pull request will "fix" the issue. The change in withStyles.d.ts may not have worked as expected. I'm pointing this out for reference.

Should this pull request be accepted, I'm happy to expand further if need be.

[mui-pr-bot]

No bundle size changes comparing bdebdfd...4595e49

Generated by 🚫 dangerJS against 4595e49

[eps1lon]

@ririvas Much appreciated, thanks!

[Methuselah96]

@eps1lon Will this be released in a patch release?

[eps1lon]

@eps1lon Will this be released in a patch release?

It will be in the next release. Whether this will be a patch or feature release I do not know.

[lookfirst]

Thanks for the fast fix, this bit me. =)