Mat Menu doesn't respect angular typography

[marc-wilson]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Angular Material Typography should apply to the menu items in a mat menu

What is the current behavior?

Angular Typography doesn't get applied to mat menu items

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

https://stackblitz.com/edit/angular-zaxsjr

What is the use-case or motivation for changing an existing behavior?

Consistency/need to leverage typography for all things in site.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Current version (see stackblitz depedencies)

Is there anything else we should know?

I forked the most basic menu example from the angular material web site (https://material.angular.io/components/menu/overview) trying to figure out why my custom typography isn't being applied to the mat menu items in a mat menu.

Following the angular typography guide on the material website (https://material.angular.io/guide/typography), I created a custom typography config. I want to use that file to manage all typography for my entire site. According to the documentation, I need to us:

// Override typography for all Angular Material, including mat-base-typography and all components. @include angular-material-typography($custom-typography);

When doing this, it works fine. For simplicity sake, I have configured my typography file to just change the font-family to webdings font. If you look at the stackblitz provided, you can see that the mat menu label and other elements respect the typography. However, the menu items within mat menu do not.

Looking in the debugger, it make sense why it's not applying. The MatManu Component created the dropdown menu outside of the parent element. That class for the typography doesn't have the MatMenuItems in scope and therefore doesn't apply it.

Is there a workaround or a recommended approach to getting MatMenuItems to respect the typography?

[crisbeto]

This is covered under our "Multiple themes and overlay-based components" section of the docs. Here's a fork of your example that works correctly.

[marc-wilson]

Perfect. Thanks @crisbeto

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}