[POC] Move sx to theme

packages/mui-joy/src/styles/defaultTheme.test.js

@@ -29,6 +29,7 @@ describe('defaultTheme', () => {
         'vars',
         'cssVarPrefix',
         'getColorSchemeSelector',
+        'unstable_sx',
       ]).to.includes(field);
     });
   });

packages/mui-joy/src/styles/extendTheme.test.js

@@ -23,6 +23,7 @@ describe('extendTheme', () => {
         'colorInversionConfig',
         'variants',
         'cssVarPrefix',
+        'unstable_sx',
       ]).to.includes(field);
     });
   });

packages/mui-joy/src/styles/extendTheme.ts

@@ -13,10 +13,11 @@ import { ColorSystem, ColorPaletteProp, PaletteRange } from './types/colorSystem
 import { Focus } from './types/focus';
 import { TypographySystem, FontSize } from './types/typography';
 import { Variants, VariantOverrides, ColorInversionConfig } from './types/variants';
-import { Theme, ThemeCssVar, ThemeScales } from './types';
+import { Theme, ThemeCssVar, ThemeScales, SxProps } from './types';
 import { Components } from './components';
 import { generateUtilityClass } from '../className';
 import { createVariant } from './variantUtils';
+import styleFunctionSx from './styleFunctionSx';
 
 type Partial2Level<T> = {
   [K in keyof T]?: T[K] extends Record<any, any>
@@ -60,6 +61,7 @@ export interface CssVarsThemeOptions extends Partial2Level<ThemeScales> {
   spacing?: SpacingOptions;
   components?: Components<Theme>;
   colorSchemes?: Partial<Record<DefaultColorScheme | ExtendedColorScheme, ColorSystemOptions>>;
+  unstable_sx?: (styles: SxProps) => any;
 }
 
 export const createGetCssVar = (cssVarPrefix = 'joy') =>
@@ -72,6 +74,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     spacing,
     components: componentsInput,
     variants: variantsInput,
+    unstable_sx: sxInput,
     ...scalesInput
   } = themeOptions || {};
   const getCssVar = createGetCssVar(cssVarPrefix);
@@ -590,8 +593,15 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
       soft: ['plain', 'outlined', 'soft', 'solid'],
       solid: ['plain', 'outlined', 'soft', 'solid'],
     },
+    unstable_sx(styles: SxProps) {
+      return styleFunctionSx({ sx: styles, theme: this });
+    },
   } as unknown as Theme; // Need type casting due to module augmentation inside the repo
 
+  if (sxInput) {
+    theme.unstable_sx = sxInput;
+  }
+
   /**
    * Color channels generation
    */

packages/mui-joy/src/styles/types/theme.ts

@@ -80,6 +80,7 @@ export interface Theme extends ThemeScales, RuntimeColorSystem {
   vars: ThemeVars;
   getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
   getColorSchemeSelector: (colorScheme: DefaultColorScheme | ExtendedColorScheme) => string;
+  unstable_sx: (styles: SystemSxProps<Omit<Theme, 'unstable_sx'>>) => any;
 }
 
 export type SxProps = SystemSxProps<Theme>;

packages/mui-material/src/styles/createTheme.d.ts

@@ -1,4 +1,4 @@
-import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme } from '@mui/system';
+import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme, SxProps } from '@mui/system';
 import { Mixins, MixinsOptions } from './createMixins';
 import { Palette, PaletteOptions } from './createPalette';
 import { Typography, TypographyOptions } from './createTypography';
@@ -16,6 +16,7 @@ export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
   typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
   zIndex?: ZIndexOptions;
   unstable_strictMode?: boolean;
+  unstable_sx?: (styles: any) => any;
 }
 
 interface BaseTheme extends SystemTheme {
@@ -36,6 +37,7 @@ export {};
  */
 export interface Theme extends BaseTheme {
   components?: Components<BaseTheme>;
+  unstable_sx: (styles: SxProps<BaseTheme>) => any;
 }
 
 /**

packages/mui-system/src/createStyled.js

@@ -3,7 +3,6 @@ import styledEngineStyled, { internal_processStyles as processStyles } from '@mu
 import { getDisplayName } from '@mui/utils';
 import createTheme from './createTheme';
 import propsToClassKey from './propsToClassKey';
-import defaultStyleFunctionSx from './styleFunctionSx';
 
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
@@ -81,12 +80,13 @@ export default function createStyled(input = {}) {
     defaultTheme = systemDefaultTheme,
     rootShouldForwardProp = shouldForwardProp,
     slotShouldForwardProp = shouldForwardProp,
-    styleFunctionSx = defaultStyleFunctionSx,
   } = input;
 
-  const systemSx = (props) => {
-    const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
-    return styleFunctionSx({ ...props, theme });
+  const systemSx = ({ theme, sx }) => {
+    if (isEmpty(theme)) {
+      return defaultTheme.unstable_sx?.(sx);
+    }
+    return theme.unstable_sx?.(sx);
   };
   systemSx.__mui_systemSx = true;
 

packages/mui-system/src/createTheme/createTheme.js

@@ -2,6 +2,7 @@ import { deepmerge } from '@mui/utils';
 import createBreakpoints from './createBreakpoints';
 import shape from './shape';
 import createSpacing from './createSpacing';
+import styleFunctionSx from '../styleFunctionSx';
 
 function createTheme(options = {}, ...args) {
   const {
@@ -23,6 +24,9 @@ function createTheme(options = {}, ...args) {
       palette: { mode: 'light', ...paletteInput },
       spacing,
       shape: { ...shape, ...shapeInput },
+      unstable_sx(styles) {
+        return styleFunctionSx({ sx: styles, theme: this });
+      },
     },
     other,
   );