[system] Support callback value in styleOverrides slot

docs/src/pages/customization/theme-components/GlobalThemeOverrideCallback.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Slider, { sliderClasses } from '@mui/material/Slider';
+
+const finalTheme = createTheme({
+  components: {
+    MuiSlider: {
+      styleOverrides: {
+        valueLabel: ({ orientation, theme }) => ({
+          ...(orientation === 'vertical' && {
+            backgroundColor: 'transparent',
+            color: theme.palette.grey[500],
+            fontWeight: 700,
+            padding: 0,
+            left: '2rem',
+          }),
+          [`&.${sliderClasses.valueLabelOpen}`]: {
+            transform: 'none',
+            top: 'initial',
+          },
+        }),
+      },
+    },
+  },
+});
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
+export default function GlobalThemeOverride() {
+  return (
+    <ThemeProvider theme={finalTheme}>
+      <Box sx={{ height: 180, display: 'inline-block' }}>
+        <Slider
+          getAriaLabel={() => 'Temperature'}
+          orientation="vertical"
+          getAriaValueText={valuetext}
+          defaultValue={[25, 50]}
+          marks={[
+            { value: 0 },
+            { value: 25 },
+            { value: 50 },
+            { value: 75 },
+            { value: 100 },
+          ]}
+          valueLabelFormat={valuetext}
+          valueLabelDisplay="on"
+        />
+      </Box>
+    </ThemeProvider>
+  );
+}

docs/src/pages/customization/theme-components/GlobalThemeOverrideCallback.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Slider, { sliderClasses } from '@mui/material/Slider';
+
+const finalTheme = createTheme({
+  components: {
+    MuiSlider: {
+      styleOverrides: {
+        valueLabel: ({ orientation, theme }) => ({
+          ...(orientation === 'vertical' && {
+            backgroundColor: 'transparent',
+            color: theme.palette.grey[500],
+            fontWeight: 700,
+            padding: 0,
+            left: '2rem',
+          }),
+          [`&.${sliderClasses.valueLabelOpen}`]: {
+            transform: 'none',
+            top: 'initial',
+          },
+        }),
+      },
+    },
+  },
+});
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
+export default function GlobalThemeOverride() {
+  return (
+    <ThemeProvider theme={finalTheme}>
+      <Box sx={{ height: 180, display: 'inline-block' }}>
+        <Slider
+          getAriaLabel={() => 'Temperature'}
+          orientation="vertical"
+          getAriaValueText={valuetext}
+          defaultValue={[25, 50]}
+          marks={[
+            { value: 0 },
+            { value: 25 },
+            { value: 50 },
+            { value: 75 },
+            { value: 100 },
+          ]}
+          valueLabelFormat={valuetext}
+          valueLabelDisplay="on"
+        />
+      </Box>
+    </ThemeProvider>
+  );
+}

docs/src/pages/customization/theme-components/theme-components.md

@@ -2,6 +2,29 @@
 
 <p class="description">The theme's `components` key allows you to customize a component without wrapping it in another component. You can change the styles, the default props, and more.</p>
 
+## Default props
+
+You can change the default of every prop of a MUI component.
+A `defaultProps` key is exposed in the theme's `components` key for this use case.
+
+```js
+const theme = createTheme({
+  components: {
+    // Name of the component
+    MuiButtonBase: {
+      defaultProps: {
+        // The props to change the default for.
+        disableRipple: true, // No more ripple!
+      },
+    },
+  },
+});
+```
+
+{{"demo": "pages/customization/theme-components/DefaultProps.js"}}
+
+To override lab component styles with TypeScript, check [this page](/components/about-the-lab/#typescript).
+
 ## Global style overrides
 
 You can use the theme's `styleOverrides` key to potentially change every single style injected by MUI into the DOM.
@@ -29,31 +52,37 @@ The list of each component's classes is documented under the **CSS** section of
 
 To override a lab component's styles with TypeScript, check [this section of the documentation](/components/about-the-lab/#typescript).
 
-## Default props
+### Overrides based on props
 
-You can change the default of every prop of a MUI component.
-A `defaultProps` key is exposed in the theme's `components` key for this use case.
+You can pass a callback as a value in each slot of the component's `styleOverrides` to apply styles based on props.
 
 ```js
-const theme = createTheme({
+const finalTheme = createTheme({
   components: {
-    // Name of the component
-    MuiButtonBase: {
-      defaultProps: {
-        // The props to change the default for.
-        disableRipple: true, // No more ripple!
+    MuiSlider: {
+      styleOverrides: {
+        // The experience is similar to styled(Component)(props => ({ ... }))
+        // props = Slider's props + theme
+        valueLabel: (props) => ({
+          ...(props.orientation === 'vertical' && {
+            backgroundColor: 'transparent',
+            color: props.theme.palette.grey[500],
+          }),
+        }),
       },
     },
   },
 });
 ```
 
-{{"demo": "pages/customization/theme-components/DefaultProps.js"}}
-
-To override lab component styles with TypeScript, check [this page](/components/about-the-lab/#typescript).
+{{"demo": "pages/customization/theme-components/GlobalThemeOverrideCallback.js"}}
 
 ## Adding new component variants
 
+> ⚠️ This API has been **deprecated** which might be removed in the next major release. If you want to apply styles based on props, take a look at [Overrides based on props](#overrides-based-on-props) instead.
+>
+> To see more details about the why, check out [issue #30412](https://github.com/mui-org/material-ui/issues/30412)
+
 You can use the `variants` key in the theme's `components` section to add new variants to MUI components. These new variants can specify what styles the component should have when specific props are applied.
 
 The definitions are specified in an array, under the component's name. For each of them a CSS class is added to the HTML `<head>`. The order is important, so make sure that the styles that should win are specified last.