[system] Add applyStyles() to theme

[siriwatknp]

Motivation

• This is a new utility to create styles for a color mode that will smooth the transition from Material UI v5 -> v6.
• Improve the DX for customization. Currently, customization is different between basic theme and CSS theme variables. This utility abstracts the implementation so developers don't need to think about it.

Note: it replaces the existing theme.applyDarkStyles from #40324

Examples

- styled('div')(({ theme }) => ({
-   background: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
- }))
+ styled('div')(({ theme }) => [
+   { background: theme.palette.grey[700] },
+   theme.applyStyles('dark', {
+      background: theme.palette.grey[300],
+   })
+ ])

- styled('div')(({ theme }) => ({
-   background: theme.vars.palette.grey[700],
-   [theme.getColorSchemeSelector('dark')]: {
-      background: theme.vars.palette.grey[300],
-   }
- }))
+ styled('div')(({ theme }) => [
+   { background: theme.vars.palette.grey[700] },
+   theme.applyStyles('dark', {
+      background: theme.vars.palette.grey[300],
+   })
+ ])

Docs

I won't add this utility to the docs for now to battle test with zero-runtime a bit more.

---

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

[mui-bot]

Netlify deploy preview

https://deploy-preview-40667--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 3a91783

[brijeshb42]

Can this be more generic? ie, can this be also used to apply styles for say, dir="rtl/ltr" ?
Or do we need a separate function for that?

[siriwatknp]

I might be wrong but I don't think it's the responsibility of applyStyles() because applyStyles is for customization that's related to colors.

I have never seen a case where rtl/ltr are differ in terms of colors. Moreover, the rtl/ltr should be done at a higher level. In emotion, it's done by a stylis plugin that changes CSS properties, e.g. from marginLeft to marginRight.

[brijeshb42]

Can you verify if this is defined in material package ? I stumbled upon this when solving another issue.

[siriwatknp]

getColorSchemeSelector is defined when CssVarsProvider is used.

I think it should be attached to the theme by extendTheme. I will create another issue to tackle this separately.

[siriwatknp]

applyStyles is already declared in the SystemTheme.

[andreassk80]

Shouldn't this have been a breaking change since it's renaming a function and be part of a major version?

[siriwatknp]

Shouldn't this have been a breaking change since it's renaming a function and be part of a major version?

This is our mistake. The new API is introduced in 5.15.6 and the name change is in 5.15.7, ideally this PR should be part of 5.15.6 but I missed it.

Anyway, since we haven't documented it yet, I hope that it won't affect anyone. Sorry for the mistake.