diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index b7c1aca48129a4..f1c1d0366c48d6 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -23,7 +23,7 @@ const overridesResolver = (props, styles) => {
   return [
     styles.root,
     (ownerState.variant === 'permanent' || ownerState.variant === 'persistent') && styles.docked,
-    styles.modal,
+    ownerState.variant === 'temporary' && styles.modal,
   ];
 };
 
diff --git a/packages/mui-material/src/Drawer/Drawer.test.js b/packages/mui-material/src/Drawer/Drawer.test.js
index b67d771cd081bc..e5bd91f3188f39 100644
--- a/packages/mui-material/src/Drawer/Drawer.test.js
+++ b/packages/mui-material/src/Drawer/Drawer.test.js
@@ -450,4 +450,36 @@ describe('<Drawer />', () => {
       expect(document.querySelector(`.${classes.root}`)).to.have.class(classes.anchorBottom);
     });
   });
+
+  ['permanent', 'persistent'].forEach((variant) => {
+    it.skipIf(isJsdom())(
+      `should not apply modal styles from theme styleOverrides for variant=${variant}`,
+      () => {
+        const theme = createTheme({
+          components: {
+            MuiDrawer: {
+              styleOverrides: {
+                modal: {
+                  backgroundColor: 'rgb(0, 0, 255)',
+                },
+              },
+            },
+          },
+        });
+
+        const { container } = render(
+          <ThemeProvider theme={theme}>
+            <Drawer variant={variant}>
+              <div />
+            </Drawer>
+          </ThemeProvider>,
+        );
+
+        const root = container.querySelector(`.${classes.root}`);
+        expect(root).not.toHaveComputedStyle({
+          backgroundColor: 'rgb(0, 0, 255)',
+        });
+      },
+    );
+  });
 });