New source found from dndbeyond.com

ddb_main/node_modules/@mui/system/createStyled.js

@@ -38,6 +38,13 @@ function isStringTag(tag) {
 function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === 'object' && serialized.styles && !serialized.styles.startsWith('@layer') // only add the layer if it is not already there.
+  ) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
+  }
+  return serialized;
+}
 const systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)();
 const lowercaseFirstLetter = string => {
   if (!string) {
@@ -58,7 +65,7 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
-function processStyleArg(callableStyle, _ref) {
+function processStyleArg(callableStyle, _ref, layerName) {
   let {
       ownerState
     } = _ref,
@@ -69,7 +76,7 @@ function processStyleArg(callableStyle, _ref) {
   if (Array.isArray(resolvedStylesArg)) {
     return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, (0, _extends2.default)({
       ownerState
-    }, props)));
+    }, props), layerName));
   }
   if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
     const {
@@ -94,14 +101,15 @@ function processStyleArg(callableStyle, _ref) {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style((0, _extends2.default)({
+        const variantStyle = typeof variant.style === 'function' ? variant.style((0, _extends2.default)({
           ownerState
-        }, props, ownerState)) : variant.style);
+        }, props, ownerState)) : variant.style;
+        result.push(layerName ? shallowLayer((0, _styledEngine.internal_serializeStyles)(variantStyle), layerName) : variantStyle);
       }
     });
     return result;
   }
-  return resolvedStylesArg;
+  return layerName ? shallowLayer((0, _styledEngine.internal_serializeStyles)(resolvedStylesArg), layerName) : resolvedStylesArg;
 }
 function createStyled(input = {}) {
   const {
@@ -132,6 +140,7 @@ function createStyled(input = {}) {
         overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
       options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded3);
+    const layerName = componentName && componentName.startsWith('Mui') || !!componentSlot ? 'components' : 'custom';
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -169,13 +178,16 @@ function createStyled(input = {}) {
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
       if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || (0, _deepmerge.isPlainObject)(stylesArg)) {
-        return props => processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
-          theme: resolveTheme({
+        return props => {
+          const theme = resolveTheme({
             theme: props.theme,
             defaultTheme,
             themeId
-          })
-        }));
+          });
+          return processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
+            theme
+          }), theme.modularCssLayers ? layerName : undefined);
+        };
       }
       return stylesArg;
     };
@@ -197,7 +209,7 @@ function createStyled(input = {}) {
           Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
             resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, (0, _extends2.default)({}, props, {
               theme
-            }));
+            }), theme.modularCssLayers ? 'theme' : undefined);
           });
           return overridesResolver(props, resolvedStyleOverrides);
         });
@@ -214,7 +226,7 @@ function createStyled(input = {}) {
             variants: themeVariants
           }, (0, _extends2.default)({}, props, {
             theme
-          }));
+          }), theme.modularCssLayers ? 'theme' : undefined);
         });
       }
       if (!skipSx) {