Provide a way to style a particular md-select.

[vqtran]

Bug, feature request, or proposal:

Feature request.

What is the expected behavior?

There should exist a way to style the pop-up menu that appears after clicking on a particular md-select. e.g. color of the panel for only one md-select but not the others.

Related to this is putting "class='darkTheme'" on an md-select should style the entire md-select component, not just the part that isn't a floating overlay.

What is the current behavior?

It seems that when the md-select menu opens, a div is inserted dynamically to the end of the DOM. This makes it so then:

1.) You can't add CSS in the current component that could override the style since the div is outside of the current component.
2.) Even using global style you can't target a single md-select because you can't add classes or ids on the dynamically added div.

darkTheme on a particular md-select will result in a dark themed select with a light themed pop-up menu.

What are the steps to reproduce?

Load any Material 2 app that has light and dark theme support.
Set the document to light theme but set the class on md-select to dark theme.

OR

From within any child component containing an md-select, try to change the color of the pop-up panel.

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

More complicated / mature applications will need to have a way to customize the look of md-select. For example if my UI had multiple md-selects but I wanted to emphasize that one was important, then I may want to color it differently, or size it differently, etc.

If I was building something like a dashboard with several different pages serving different functions, it is unreasonable to expect that each page of the dashboard should have identical style on their md-selects.

Moreover, applying dark-theme to components should happen in a consistent manner. Right now to understand what is going on the user has to understand how Material is implemented (overlays are injected elsewhere in the DOM).

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

This should be the case in all versions.

Is there anything else we should know?

As a possible solution, it would be nice if the overlay pane's CSS mirrored/copied the original component. This would make it so then when I try to override .mat-select-panel under a normal component (which does nothing), that same override is copied over to the corresponding spot in the overlay and thus would apply.

[vqtran]

This seems to be mostly fixed via panelClass: #4485

[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.}