fix(material-experimental/mdc-menu): menu item should not inherit parent classname (#17953)

Author: andrewseguin

src/material-experimental/mdc-menu/menu-item.ts

@@ -19,6 +19,9 @@ import {MatMenuItem as BaseMatMenuItem} from '@angular/material/menu';
   inputs: ['disabled', 'disableRipple'],
   host: {
     '[attr.role]': 'role',
+    // The MatMenuItem parent class adds `mat-menu-item` to the CSS classlist, but this should
+    // not be added for this MDC equivalent menu item.
+    '[class.mat-menu-item]': 'false',
     'class': 'mat-mdc-menu-item',
     '[class.mat-mdc-menu-item-highlighted]': '_highlighted',
     '[class.mat-mdc-menu-item-submenu-trigger]': '_triggersSubmenu',

src/material/menu/menu-item.ts

@@ -44,7 +44,7 @@ const _MatMenuItemMixinBase: CanDisableRippleCtor & CanDisableCtor & typeof MatM
   inputs: ['disabled', 'disableRipple'],
   host: {
     '[attr.role]': 'role',
-    'class': 'mat-menu-item',
+    '[class.mat-menu-item]': 'true',
     '[class.mat-menu-item-highlighted]': '_highlighted',
     '[class.mat-menu-item-submenu-trigger]': '_triggersSubmenu',
     '[attr.tabindex]': '_getTabIndex()',