[core] v5 emotion-less css & styled prototype

packages/mui-system/src/createStyled.d.ts

@@ -37,3 +37,5 @@ export default function createStyled<Theme extends object = DefaultTheme>(option
   slotShouldForwardProp?: (prop: PropertyKey) => boolean;
   styleFunctionSx?: typeof styleFunctionSx;
 }): CreateMUIStyled<Theme>;
+
+export function applyStyled(props: any, componentName: string, overridesResolver: Function): string;

packages/mui-system/src/createStyled.js

@@ -1,5 +1,8 @@
 /* eslint-disable no-underscore-dangle */
-import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
+import styledEngineStyled, {
+  css,
+  internal_processStyles as processStyles,
+} from '@mui/styled-engine';
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
@@ -181,28 +184,14 @@ export default function createStyled(input = {}) {
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push((props) => {
           const theme = resolveTheme({ ...props, defaultTheme, themeId });
-          if (
-            !theme.components ||
-            !theme.components[componentName] ||
-            !theme.components[componentName].styleOverrides
-          ) {
-            return null;
-          }
-          const styleOverrides = theme.components[componentName].styleOverrides;
-          const resolvedStyleOverrides = {};
-          // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
-          Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, { ...props, theme });
-          });
-          return overridesResolver(props, resolvedStyleOverrides);
+          return applyThemeOverrides(theme, props, componentName, overridesResolver);
         });
       }
 
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push((props) => {
           const theme = resolveTheme({ ...props, defaultTheme, themeId });
-          const themeVariants = theme?.components?.[componentName]?.variants;
-          return processStyleArg({ variants: themeVariants }, { ...props, theme });
+          return applyThemeVariants(theme, props, componentName);
         });
       }
 
@@ -245,3 +234,41 @@ export default function createStyled(input = {}) {
     return muiStyledResolver;
   };
 }
+
+export function applyStyled(props, componentName, overridesResolver) {
+  const styles = applyThemeOverrides(props, componentName, overridesResolver);
+
+  // NOTE: Later on, we might want to apply other MUI features:
+  // const styles = [
+  //   applyThemeOverrides(props, componentName, overridesResolver),
+  //   applyThemeVariants(props, componentName),
+  //   applySystemSx(props, componentName),
+  // ]
+
+  return css(styles);
+}
+
+function applyThemeOverrides(theme, props, componentName, overridesResolver) {
+  if (
+    !theme.components ||
+    !theme.components[componentName] ||
+    !theme.components[componentName].styleOverrides
+  ) {
+    return null;
+  }
+  const styleOverrides = theme.components[componentName].styleOverrides;
+  const resolvedStyleOverrides = {};
+  // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
+  Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
+    resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, { ...props, theme });
+  });
+  return overridesResolver(props, resolvedStyleOverrides);
+}
+
+function applyThemeVariants(theme, props, componentName) {
+  const themeVariants = theme?.components?.[componentName]?.variants;
+  if (!themeVariants) {
+    return null;
+  }
+  return processStyleArg({ variants: themeVariants }, { ...props, theme });
+}