[material-ui] Return styles directly if the selector is & when using applyStyles

packages/mui-material/src/styles/createTheme.test.js

@@ -503,6 +503,12 @@ describe('createTheme', () => {
     });
   });
 
+  it('should return the styles directly when using applyStyles if the selector is `&`', function test() {
+    const theme = createTheme({ cssVariables: true, palette: { mode: 'dark' } });
+
+    expect(theme.applyStyles('dark', { color: 'red' })).to.deep.equal({ color: 'red' });
+  });
+
   it('Throw an informative error when the key `vars` is passed as part of `options` passed', () => {
     try {
       createTheme({

packages/mui-system/src/createTheme/applyStyles.test.ts

@@ -69,4 +69,16 @@ describe('applyStyles', () => {
     const styles = { background: '#e5e5e5' };
     expect(applyStyles.call(theme, 'dark', styles)).to.deep.equal({});
   });
+
+  it('should return the styles directly if selector is &', () => {
+    const theme = {
+      vars: {},
+      colorSchemes: { light: true },
+      getColorSchemeSelector: () => {
+        return '&';
+      },
+    };
+    const styles = { background: '#e5e5e5' };
+    expect(applyStyles.call(theme, 'light', styles)).to.deep.equal(styles);
+  });
 });

packages/mui-system/src/createTheme/applyStyles.ts

@@ -76,6 +76,9 @@ export default function applyStyles<K extends string>(key: K, styles: CSSObject)
     }
     // If CssVarsProvider is used as a provider, returns '*:where({selector}) &'
     let selector = theme.getColorSchemeSelector(key);
+    if (selector === '&') {
+      return styles;
+    }
     if (selector.includes('data-') || selector.includes('.')) {
       // '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)
       selector = `*:where(${selector.replace(/\s*&$/, '')}) &`;