fix(material-experimental/mdc-list): avoid style conflicts with MDC list

The specificity of the MDC-based menu item is low enough that if the MDC list is loaded later, it'll be overwritten and break the layout of the menu item. These changes increase the specificity of the relevant styles.

Author: crisbeto

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

@@ -66,6 +66,13 @@ mat-menu {
   $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height);
   min-height: map.get($height-config, default);
 
+  // If the MDC list is loaded after the menu, this gets overwritten which breaks the text
+  // alignment. Ideally we'd wrap all the MDC mixins above with this selector, but the increased
+  // specificity breaks some internal overrides.
+  &.mdc-list-item {
+    align-items: center;
+  }
+
   &[disabled] {
     cursor: default;
 
@@ -107,6 +114,10 @@ mat-menu {
     white-space: normal;
   }
 
+  &.mat-mdc-menu-item-submenu-trigger {
+    @include mat.private-menu-common-item-submenu-trigger(mdc-list-variables.$side-padding);
+  }
+
   @include cdk.high-contrast(active, off) {
     $outline-width: 1px;
 
@@ -122,10 +133,6 @@ mat-menu {
   }
 }
 
-.mat-mdc-menu-item-submenu-trigger {
-  @include mat.private-menu-common-item-submenu-trigger(mdc-list-variables.$side-padding);
-}
-
 .mat-mdc-menu-submenu-icon {
   @include mat.private-menu-common-item-submenu-icon(mdc-list-variables.$side-padding);
 }