[Modal] Pass className from BackdropProps (#37399)

mui · May 29, 2023 · 1bede6a · 1bede6a
1 parent a6c93af
commit 1bede6a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/mui-material/src/Modal/Modal.js b/packages/mui-material/src/Modal/Modal.js
@@ -135,7 +135,11 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
         backdrop: () => ({
           ...BackdropProps,
           ...resolveComponentProps(backdropSlotProps, ownerState),
-          className: clsx(backdropSlotProps?.className, classes?.backdrop),
+          className: clsx(
+            backdropSlotProps?.className,
+            BackdropProps?.className,
+            classes?.backdrop,
+          ),
         }),
       }}
       onTransitionEnter={() => setExited(false)}

diff --git a/packages/mui-material/src/Modal/Modal.test.js b/packages/mui-material/src/Modal/Modal.test.js
@@ -828,4 +828,15 @@ describe('<Modal />', () => {
       expect(within(getByTestId('parent')).getByTestId('child')).not.to.equal(null);
     });
   });
+
+  describe('prop: BackdropProps', () => {
+    it('should handle custom className', () => {
+      const { getByTestId } = render(
+        <Modal open BackdropProps={{ className: 'custom-backdrop', 'data-testid': 'backdrop' }}>
+          <div />
+        </Modal>,
+      );
+      expect(getByTestId('backdrop')).to.have.class('custom-backdrop');
+    });
+  });
 });