From 0e77141e46cf0e3af9ec2561ec8f650a11c03f38 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 6 Sep 2024 16:55:58 +0700
Subject: [PATCH] fix selector &

---
 packages/mui-material/src/styles/createTheme.test.js |  6 ++++++
 .../mui-system/src/createTheme/applyStyles.test.ts   | 12 ++++++++++++
 packages/mui-system/src/createTheme/applyStyles.ts   |  3 +++
 3 files changed, 21 insertions(+)

diff --git a/packages/mui-material/src/styles/createTheme.test.js b/packages/mui-material/src/styles/createTheme.test.js
index 3c24d90fe3f302..f40f342ff2c0fb 100644
--- a/packages/mui-material/src/styles/createTheme.test.js
+++ b/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({
diff --git a/packages/mui-system/src/createTheme/applyStyles.test.ts b/packages/mui-system/src/createTheme/applyStyles.test.ts
index d954f48d5d6977..91d00f5eed78f7 100644
--- a/packages/mui-system/src/createTheme/applyStyles.test.ts
+++ b/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);
+  });
 });
diff --git a/packages/mui-system/src/createTheme/applyStyles.ts b/packages/mui-system/src/createTheme/applyStyles.ts
index 963384d8e11ad6..0ad33c5e90e311 100644
--- a/packages/mui-system/src/createTheme/applyStyles.ts
+++ b/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*&$/, '')}) &`;