[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: ({ ownerState, theme }) => ({
+          ...(ownerState.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: ({ ownerState, theme }) => ({
+          ...(ownerState.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/GlobalThemeOverrideSx.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import {
+  ThemeProvider,
+  createTheme,
+  experimental_sx as sx,
+} from '@mui/material/styles';
+import Chip from '@mui/material/Chip';
+import Check from '@mui/icons-material/Check';
+
+const finalTheme = createTheme({
+  components: {
+    MuiChip: {
+      styleOverrides: {
+        root: sx({
+          // https://mui.com/system/the-sx-prop/#spacing
+          px: 1,
+          py: 0.25,
+          // https://mui.com/system/borders/#border-radius
+          borderRadius: 1, // 4px as default.
+        }),
+        label: {
+          padding: 'initial',
+        },
+        icon: sx({
+          mr: 0.5,
+          ml: '-2px',
+        }),
+      },
+    },
+  },
+});
+
+export default function GlobalThemeOverride() {
+  return (
+    <ThemeProvider theme={finalTheme}>
+      <Chip
+        color="success"
+        label={
+          <span>
+            <b>Status:</b> Completed
+          </span>
+        }
+        icon={<Check fontSize="small" />}
+      />
+    </ThemeProvider>
+  );
+}

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import {
+  ThemeProvider,
+  createTheme,
+  experimental_sx as sx,
+} from '@mui/material/styles';
+import Chip from '@mui/material/Chip';
+import Check from '@mui/icons-material/Check';
+
+const finalTheme = createTheme({
+  components: {
+    MuiChip: {
+      styleOverrides: {
+        root: sx({
+          // https://mui.com/system/the-sx-prop/#spacing
+          px: 1,
+          py: 0.25,
+          // https://mui.com/system/borders/#border-radius
+          borderRadius: 1, // 4px as default.
+        }),
+        label: {
+          padding: 'initial',
+        },
+        icon: sx({
+          mr: 0.5,
+          ml: '-2px',
+        }),
+      },
+    },
+  },
+});
+
+export default function GlobalThemeOverride() {
+  return (
+    <ThemeProvider theme={finalTheme}>
+      <Chip
+        color="success"
+        label={
+          <span>
+            <b>Status:</b> Completed
+          </span>
+        }
+        icon={<Check fontSize="small" />}
+      />
+    </ThemeProvider>
+  );
+}

docs/src/pages/customization/theme-components/GlobalThemeOverrideSx.tsx.preview

@@ -0,0 +1,11 @@
+<ThemeProvider theme={finalTheme}>
+  <Chip
+    color="success"
+    label={
+      <span>
+        <b>Status:</b> Completed
+      </span>
+    }
+    icon={<Check fontSize="small" />}
+  />
+</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,45 @@ 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.
+
+The `ownerState` prop is a combination of public props that you pass to the component + internal state of the component.
 
 ```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: {
+        valueLabel: ({ ownerState, theme }) => ({
+          ...(ownerState.orientation === 'vertical' && {
+            backgroundColor: 'transparent',
+            color: theme.palette.grey[500],
+          }),
+        }),
       },
     },
   },
 });
 ```
 
-{{"demo": "pages/customization/theme-components/DefaultProps.js"}}
+{{"demo": "pages/customization/theme-components/GlobalThemeOverrideCallback.js"}}
 
-To override lab component styles with TypeScript, check [this page](/components/about-the-lab/#typescript).
+### Using `sx` (experimental) syntax
+
+If you are not familiar `sx`, first check out [the concept](/system/the-sx-prop) and [the difference with the `styled`](/system/styled/#difference-with-the-sx-prop).
+
+`sx` is also compatible with theme style overrides if you prefer the shorthand notation.
+
+{{"demo": "pages/customization/theme-components/GlobalThemeOverrideSx.js"}}
 
 ## Adding new component variants
 
+> ⚠️ This API has been **deprecated** and will likely 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.
+>
+> If you are interested to see the reasoning behind this change, 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.

packages/mui-joy/src/Button/Button.test.js

@@ -14,7 +14,6 @@ describe('Joy <Button />', () => {
     refInstanceof: window.HTMLButtonElement,
     muiName: 'MuiButton',
     testVariantProps: { variant: 'contained', fullWidth: true },
-    testStateOverrides: { prop: 'size', value: 'sm', styleKey: 'sizeSm' },
     skip: ['propsSpread', 'componentsProp', 'classesRoot'],
   }));
 

packages/mui-joy/src/Button/Button.tsx

@@ -36,17 +36,7 @@ const useUtilityClasses = (ownerState: ButtonProps & { focusVisible: boolean })
 const ButtonRoot = styled('button', {
   name: 'MuiButton',
   slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const { ownerState } = props;
-
-    return [
-      styles.root,
-      styles[`variant${capitalize(ownerState.variant)}`],
-      styles[`color${capitalize(ownerState.color)}`],
-      ownerState.size && styles[`size${capitalize(ownerState.size)}`],
-      ownerState.fullWidth && styles.fullWidth,
-    ];
-  },
+  overridesResolver: (props, styles) => styles.root,
 })<{ ownerState: ButtonProps }>(({ theme, ownerState }) => {
   return [
     {

packages/mui-joy/src/Button/ButtonProps.ts

@@ -8,6 +8,8 @@ import {
 import { SxProps } from '../styles/defaultTheme';
 import { ColorPaletteProp, VariantProp } from '../styles/types';
 
+export type ButtonSlot = 'root';
+
 export interface ButtonPropsVariantOverrides {}
 
 export interface ButtonPropsColorOverrides {}

packages/mui-joy/src/SvgIcon/SvgIcon.tsx

@@ -26,15 +26,7 @@ const useUtilityClasses = (ownerState: SvgIconProps) => {
 const SvgIconRoot = styled('svg', {
   name: 'MuiSvgIcon',
   slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const { ownerState } = props;
-
-    return [
-      styles.root,
-      styles[`color${capitalize(ownerState.color)}`],
-      styles[`fontSize${capitalize(ownerState.fontSize)}`],
-    ];
-  },
+  overridesResolver: (props, styles) => styles.root,
 })<{ ownerState: SvgIconProps }>(({ theme, ownerState }) => {
   return [
     {

packages/mui-joy/src/SvgIcon/SvgIconProps.ts

@@ -4,6 +4,8 @@ import { SxProps } from '../styles/defaultTheme';
 import { ColorPaletteProp, FontSize } from '../styles/types';
 import { SvgIconClasses } from './svgIconClasses';
 
+export type SvgIconSlot = 'root';
+
 export interface SvgIconPropsSizeOverrides {}
 
 export interface SvgIconPropsColorOverrides {}

packages/mui-joy/src/Switch/Switch.test.js

@@ -15,6 +15,7 @@ describe('<Switch />', () => {
     testDeepOverrides: [
       { slotName: 'track', slotClassName: classes.track },
       { slotName: 'input', slotClassName: classes.input },
+      { slotName: 'thumb', slotClassName: classes.thumb },
     ],
     refInstanceof: window.HTMLSpanElement,
     skip: [

packages/mui-joy/src/Switch/SwitchProps.ts

@@ -5,6 +5,8 @@ import { SwitchClasses } from './switchClasses';
 import { SxProps } from '../styles/defaultTheme';
 import { ColorPaletteProp } from '../styles/types';
 
+export type SwitchSlot = 'root' | 'input' | 'track' | 'thumb';
+
 export interface SwitchPropsColorOverrides {}
 
 export interface SwitchPropsSizeOverrides {}

packages/mui-joy/src/Typography/Typography.test.js

@@ -14,7 +14,6 @@ describe('<Typography />', () => {
     render,
     refInstanceof: window.HTMLParagraphElement,
     muiName: 'MuiTypography',
-    testStateOverrides: { prop: 'level', value: 'h2', styleKey: 'h2' },
     skip: ['componentsProp', 'classesRoot', 'themeVariants'],
   }));