diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss
index 124fa61ba9ab..5a6e2da18395 100644
--- a/src/material/menu/menu.scss
+++ b/src/material/menu/menu.scss
@@ -18,8 +18,10 @@ mat-menu {
@include mdc-list-mixins.list-base($query: structure);
&,
- .mat-mdc-menu-item .mdc-list-item__primary-text {
+ .mat-mdc-menu-item .mat-mdc-menu-item-text {
@include mdc-typography.smooth-font();
+ white-space: normal;
+
@include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
@include token-utils.create-token-slot(font-family, item-label-text-font);
@include token-utils.create-token-slot(line-height, item-label-text-line-height);
@@ -32,7 +34,8 @@ mat-menu {
.mat-mdc-menu-panel {
@include token-utils.create-token-values(tokens-mat-menu.$prefix,
- tokens-mat-menu.get-unthemable-tokens());
+ tokens-mat-menu.get-unthemable-tokens());
+ @include menu-common.base;
box-sizing: border-box;
outline: 0;
@@ -63,20 +66,6 @@ mat-menu {
}
}
-// We need to increase the specificity for these styles to ensure we are not overridden 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`.
- // Furthermore, the relative position ensures that the `offsetParent` is the menu, rather than
- // the overlay. This comes into play when we measure the `offsetTop` of a menu item.
- position: relative;
-}
-
.mat-mdc-menu-item {
@include mdc-helpers.disable-mdc-fallback-declarations {
@include mdc-list-mixins.item-base;
@@ -96,6 +85,7 @@ mat-menu {
background: none;
text-decoration: none;
margin: 0; // Resolves an issue where buttons have an extra 2px margin on Safari.
+ align-items: center;
// Set the `min-height` here ourselves, instead of going through
// the `mdc-list-one-line-item-density` mixin, because it sets a `height`
@@ -117,13 +107,6 @@ mat-menu {
}
}
- // 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;
@@ -159,12 +142,6 @@ mat-menu {
}
}
- // Needs to be overwritten explicitly, because the style can
- // leak in from the list and cause the text to truncate.
- .mdc-list-item__primary-text {
- white-space: normal;
- }
-
&.mat-mdc-menu-item-submenu-trigger {
@include menu-common.item-submenu-trigger(mdc-list-variables.$side-padding);
}