diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.scss b/src/material-experimental/mdc-autocomplete/autocomplete.scss
index 52069092f44f..5b49a81e4aac 100644
--- a/src/material-experimental/mdc-autocomplete/autocomplete.scss
+++ b/src/material-experimental/mdc-autocomplete/autocomplete.scss
@@ -6,7 +6,9 @@
 
 @include mdc-menu-surface-core-styles($query: structure);
 
-.mat-mdc-autocomplete-panel {
+// Note that the `.mdc-menu-surface` is here in order to bump up the specificity
+// and avoid interference with `mat-menu` which uses the same mixins from MDC.
+.mdc-menu-surface.mat-mdc-autocomplete-panel {
   width: 100%; // Ensures that the panel matches the overlay width.
   max-height: 256px; // Prevents lists with a lot of option from growing too high.
   position: static; // MDC uses `absolute` by default which will throw off our positioning.
@@ -28,13 +30,14 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
-}
 
-// These classes are used to toggle the panel's visibility depending on whether it has any options.
-.mat-mdc-autocomplete-visible {
-  visibility: visible;
-}
+  // These classes are used to toggle the panel visibility depending on whether it has any options.
+  &.mat-mdc-autocomplete-visible {
+    visibility: visible;
+  }
 
-.mat-mdc-autocomplete-hidden {
-  visibility: hidden;
+  &.mat-mdc-autocomplete-hidden {
+    visibility: hidden;
+  }
 }
+