fix(material-experimental/mdc-menu): increase specificity of menu panel styles (#23178)

* We had some order-dependent styles that would be overridden if MDCs styles
  got loaded after ours. We are increasing the specificity of the menu panel
  styles to prevent these styles from being overriden when this edge
  case is hit

(cherry picked from commit a81834a)

Author: wagnermaciel

src/material-experimental/mdc-menu/menu.scss

@@ -19,17 +19,21 @@ mat-menu {
 }
 
 .mat-mdc-menu-panel {
+  @include a11y.high-contrast(active, off) {
+    outline: solid 1px;
+  }
+}
+
+// We need to increase the specificity for these styles to ensure we are not overriden by MDC's
+// .mdc-menu-surface styles. This can happen if the MDC styles are loaded in after our styles.
+.mat-mdc-menu-panel.mat-mdc-menu-panel {
   // Include Material's base menu panel styling which contain the `min-width`, `max-width` and some
   // styling to make scrolling smoother. MDC doesn't include the `min-width` and `max-width`, even
   // though they're explicitly defined in spec.
   @include menu-common.base;
 
   // The CDK positioning uses flexbox to anchor the element, whereas MDC uses `position: absolute`.
   position: static;
-
-  @include a11y.high-contrast(active, off) {
-    outline: solid 1px;
-  }
 }
 
 .mat-mdc-menu-item {