From 449d6edbbaa8fd4856e54e1e8c18c10ec962e983 Mon Sep 17 00:00:00 2001
From: Brent Ertz <202773+brentertz@users.noreply.github.com>
Date: Mon, 11 Sep 2023 11:13:21 -0600
Subject: [PATCH] [Tabs] Scrollable tabs shouldn't crash when customizing their
 styles in the theme with slot callbacks (#38544)

Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
---
 packages/mui-material-next/src/Tabs/Tabs.js |  5 +---
 packages/mui-material/src/Tabs/Tabs.js      |  5 +---
 packages/mui-material/src/Tabs/Tabs.test.js | 31 +++++++++++++++++++++
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/packages/mui-material-next/src/Tabs/Tabs.js b/packages/mui-material-next/src/Tabs/Tabs.js
index bff171b48e9d33..f2cc1b77a83c3b 100644
--- a/packages/mui-material-next/src/Tabs/Tabs.js
+++ b/packages/mui-material-next/src/Tabs/Tabs.js
@@ -146,10 +146,7 @@ const TabsIndicator = styled('span', {
   }),
 }));
 
-const TabsScrollbarSize = styled(ScrollbarSize, {
-  name: 'MuiTabs',
-  slot: 'ScrollbarSize',
-})({
+const TabsScrollbarSize = styled(ScrollbarSize)({
   overflowX: 'auto',
   overflowY: 'hidden',
   // Hide dimensionless scrollbar on macOS
diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
index 12a9f9ba9fa24e..7c93ba1186f013 100644
--- a/packages/mui-material/src/Tabs/Tabs.js
+++ b/packages/mui-material/src/Tabs/Tabs.js
@@ -213,10 +213,7 @@ const TabsIndicator = styled('span', {
   }),
 }));
 
-const TabsScrollbarSize = styled(ScrollbarSize, {
-  name: 'MuiTabs',
-  slot: 'ScrollbarSize',
-})({
+const TabsScrollbarSize = styled(ScrollbarSize)({
   overflowX: 'auto',
   overflowY: 'hidden',
   // Hide dimensionless scrollbar on macOS
diff --git a/packages/mui-material/src/Tabs/Tabs.test.js b/packages/mui-material/src/Tabs/Tabs.test.js
index 4ce124b5a04176..e6bf75b31c0801 100644
--- a/packages/mui-material/src/Tabs/Tabs.test.js
+++ b/packages/mui-material/src/Tabs/Tabs.test.js
@@ -523,6 +523,37 @@ describe('<Tabs />', () => {
       });
       expect(tablistContainer.style.overflow).to.equal('');
     });
+
+    it('should handle theme styleOverrides for scrollable tabs without crashing', () => {
+      const theme = createTheme({
+        components: {
+          MuiTabs: {
+            styleOverrides: {
+              root: ({ ownerState: { orientation } }) => ({
+                ...(orientation === 'vertical'
+                  ? {
+                      background: 'magenta',
+                    }
+                  : {
+                      background: 'lime',
+                    }),
+              }),
+            },
+          },
+        },
+      });
+
+      expect(() =>
+        render(
+          <ThemeProvider theme={theme}>
+            <Tabs sx={{ width: 200 }} value={0} variant="scrollable">
+              <Tab label="First" />
+              <Tab label="Second" />
+            </Tabs>
+          </ThemeProvider>,
+        ),
+      ).not.to.throw();
+    });
   });
 
   describe('prop: !variant="scrollable"', () => {