[Tabs] Scrollable tabs crashes when overriding styles in theme using slots callback

[pvdstel]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/mui-tabs-style-override-crash-p9wfjm-p9wfjm?file=/package.json

Downgrading the package version in the live example will "fix" the error.

Steps:

1. Use a Tabs component, set its variant to scrollable.
2. Create a custom theme which uses a function to override Tabs styling. This function uses the props parameter to decide which styles to apply. The ownerState.orientation field is deconstructed out of the object.

Current behavior 😯

The rendering crashes, stating that _ref.ownerState is undefined (where _ref is the name of the props parameter after downleveling). This happens because the props object does not have the ownerState prop, even though its typings suggest that it does have that prop.

Expected behavior 🤔

The props object should have the ownerState prop, as the typings describe.

Context 🔦

This appears to happen because TabsScrollbarSize is being rendered. It uses the same style overrides as the other Tabs components, but it does not get an ownerState prop. Thus, it is undefined.

Your environment 🌎

This error started appearing during routine package upgrades. In one package, it began to occur after upgrading from 5.14.2 to 5.14.4. But in others, the upgrade to 5.14.4 did not trigger the same issue, and only appeared when we forced nested dependencies to upgrade as well.

We are not completely sure, but believe that it is related to @mui/system. Downgrading that package appears to resolve the issue on the latest version of @mui/material.

"resolutions": {
    "@mui/system": "5.14.1"
}

It happens in all browsers.

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 18.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22621.1992.0), Chromium (115.0.1901.200)
  npmPackages:
    @emotion/react: 11.11.1 => 11.11.1 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.10 
    @mui/core-downloads-tracker:  5.14.4 
    @mui/material: 5.14.4 => 5.14.4 
    @mui/private-theming:  5.14.4 
    @mui/styled-engine:  5.13.2 
    @mui/system:  5.14.4 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.4 
    @types/react: 18.2.18 => 18.2.18 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.1.6 => 5.1.6 

[brentertz]

I ran into this as well, reading ownerState values in the theme styleOverrides for the Tabs component. Pinning "@mui/material": "5.14.3" and adding a resolution/override for "@mui/system": "5.14.3" is my temporary workaround.

[siriwatknp]

I propose the fix like this:

diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
index 12a9f9ba9f..7c93ba1186 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

Since the TabsScrollbarSize is not intended to be themable, there is no reason to add name and slot to it.

[brentertz]

The proposed solution above works fine on my end. 👍

[siriwatknp]

The proposed solution above works fine on my end. 👍

Would you like to submit a PR?