[material-ui] Fix default props theme scoping (#44340)

mui · Nov 11, 2024 · eded485 · eded485
1 parent 3d21338
commit eded485
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/packages/mui-system/src/ThemeProvider/ThemeProvider.js b/packages/mui-system/src/ThemeProvider/ThemeProvider.js
@@ -63,13 +63,16 @@ function ThemeProvider(props) {
 
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
-  const rtlValue = engineTheme.direction === 'rtl';
-
+  const rtlValue = (themeId ? engineTheme[themeId] : engineTheme).direction === 'rtl';
   return (
     <MuiThemeProvider theme={privateTheme}>
       <StyledEngineThemeContext.Provider value={engineTheme}>
         <RtlProvider value={rtlValue}>
-          <DefaultPropsProvider value={engineTheme?.components}>{children}</DefaultPropsProvider>
+          <DefaultPropsProvider
+            value={themeId ? engineTheme[themeId].components : engineTheme.components}
+          >
+            {children}
+          </DefaultPropsProvider>
         </RtlProvider>
       </StyledEngineThemeContext.Provider>
     </MuiThemeProvider>

diff --git a/packages/mui-system/src/ThemeProvider/ThemeProvider.test.js b/packages/mui-system/src/ThemeProvider/ThemeProvider.test.js
@@ -5,6 +5,7 @@ import { useTheme as usePrivateTheme } from '@mui/private-theming';
 import { ThemeContext } from '@mui/styled-engine';
 import { ThemeProvider } from '@mui/system';
 import { useRtl } from '@mui/system/RtlProvider';
+import { useDefaultProps } from '../DefaultPropsProvider';
 
 const useEngineTheme = () => React.useContext(ThemeContext);
 
@@ -297,6 +298,19 @@ describe('ThemeProvider', () => {
     ]);
   });
 
+  it('theme scope: should pass scoped theme to DefaultPropsProvider', () => {
+    function Test(props) {
+      const defaultProps = useDefaultProps({ props, name: 'MuiTest' });
+      return defaultProps.text;
+    }
+    const { container } = render(
+      <ThemeProvider themeId="mui" theme={{ components: { MuiTest: { text: 'foo' } } }}>
+        <Test />
+      </ThemeProvider>,
+    );
+    expect(container.firstChild).to.have.text('foo');
+  });
+
   it('sets the correct value for the RtlProvider based on the theme.direction', () => {
     let rtlValue = null;
     function Test() {