fix to backdrop.js and tests

mui · Feb 16, 2024 · 3d2840b · 3d2840b
1 parent 23a06da
commit 3d2840b
Showing 1 changed file with 15 additions and 18 deletions.
diff --git a/packages/mui-material/src/Backdrop/Backdrop.js b/packages/mui-material/src/Backdrop/Backdrop.js
@@ -49,8 +49,6 @@ const Backdrop = React.forwardRef(function Backdrop(inProps, ref) {
     children,
     className,
     component = 'div',
-    components = {},
-    componentsProps = {},
     invisible = false,
     open,
     slotProps = {},
@@ -68,34 +66,33 @@ const Backdrop = React.forwardRef(function Backdrop(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootSlotProps = slotProps.root ?? componentsProps.root;
-
   const backwardCompatibleSlots = { transition: TransitionComponentProp, ...slots };
 
+  const externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps,
+  };
+
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: BackdropRoot,
+    externalForwardedProps,
+    className: clsx(classes.root, className),
+    ownerState,
+  });
+
   const [TransitionSlot, transitionProps] = useSlot('transition', {
     elementType: Fade,
-    externalForwardedProps: {
-      slots: backwardCompatibleSlots,
-      slotProps,
-    },
+    externalForwardedProps,
     ownerState,
   });
 
   delete transitionProps.ownerState;
 
   return (
     <TransitionSlot in={open} timeout={transitionDuration} {...other} {...transitionProps}>
-      <BackdropRoot
-        aria-hidden
-        {...rootSlotProps}
-        as={slots.root ?? components.Root ?? component}
-        className={clsx(classes.root, className, rootSlotProps?.className)}
-        ownerState={{ ...ownerState, ...rootSlotProps?.ownerState }}
-        classes={classes}
-        ref={ref}
-      >
+      <RootSlot aria-hidden {...rootProps} classes={classes} ref={ref}>
         {children}
-      </BackdropRoot>
+      </RootSlot>
     </TransitionSlot>
   );
 });