apply suggestion

mui · Jan 10, 2025 · 0e09474 · 0e09474
1 parent bb813d4
commit 0e09474
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js
@@ -191,7 +191,6 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
 
   const externalForwardedProps = {
-    ...other,
     slots: {
       closeButton: components.CloseButton,
       closeIcon: components.CloseIcon,
@@ -205,9 +204,13 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
 
   const [RootSlot, rootSlotProps] = useSlot('root', {
     ref,
+    shouldForwardComponentProp: true,
     className: clsx(classes.root, className),
     elementType: AlertRoot,
-    externalForwardedProps,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+    },
     ownerState,
     additionalProps: {
       role,

diff --git a/packages/mui-material/src/utils/useSlot.ts b/packages/mui-material/src/utils/useSlot.ts
@@ -82,6 +82,14 @@ export default function useSlot<
      * e.g. Autocomplete's listbox uses Popper + StyledComponent
      */
     internalForwardedProps?: any;
+    /**
+     * Set to true if the `elementType` is a styled component of another Material UI component.
+     *
+     * For example, the AlertRoot is a styled component of the Paper component.
+     * This flag is used to forward the `component` and `slotProps.root.component` to the Paper component.
+     * Otherwise, the `component` prop will be converted to `as` prop which replaces the Paper component (the paper styles are gone).
+     */
+    shouldForwardComponentProp?: boolean;
   },
 ) {
   const {
@@ -90,6 +98,7 @@ export default function useSlot<
     ownerState,
     externalForwardedProps,
     internalForwardedProps,
+    shouldForwardComponentProp = false,
     ...useSlotPropsParams
   } = parameters;
   const {
@@ -127,9 +136,14 @@ export default function useSlot<
       ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
       ...(name !== 'root' && !slots[name] && internalForwardedProps),
       ...mergedProps,
-      ...(LeafComponent && {
-        as: LeafComponent,
-      }),
+      ...(LeafComponent &&
+        !shouldForwardComponentProp && {
+          as: LeafComponent,
+        }),
+      ...(LeafComponent &&
+        shouldForwardComponentProp && {
+          component: LeafComponent,
+        }),
       ref,
     },
     ownerState,