multiple themes don't work with overlay-based components

[DenisLaboureyras]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

when I add a class refering to an angular material them, the md-select component must be affected by this theme

What is the current behavior?

The md-select component keeps the default theme. The other components I tried (tabs, input, checkbox) are working correctly.

What are the steps to reproduce?

Create 2 themes, one default and one inside a css class, and add this css class on a parent of a md-select component.

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

To have a fully functional multiple themes feature

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

I'm using Angular 2.4.3, Material 2-beta1 (using latest build repository), and chrome.
I don't know if others browsers are affected, but I'm assuming it's the case.

Is there anything else we should know?

[n2lose]

Seems. i had same issue.
I have followed theme guide to create a custom theme. I also checkout the showcase material2-app and check the material2-app-theme.scss.
It works fine one demo , when you click toggle button, it changes thecolor of all the components has class .md-primary, .md-accent,...

.m2app-dark {
  $dark-primary: md-palette($md-pink, 700, 500, 900);
  $dark-accent:  md-palette($md-blue-grey, A200, A100, A400);
  $dark-warn:    md-palette($md-deep-orange);

  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
}

I just see in guide, we need to build this scss file to css and linked in the app.component.html.
Can I import it from stylesURLs in the app.component.ts or app.component.scss instead of link in the html?
I have did imported in the app.component.ts, it seems doesn't work well. It just change the background color or main page, but it doesn't change the color of components as checkbox, radio, button,...
Here is my theme:

@import '~@angular/material/core/theming/_all-theme';

// Include non-theme styles for core.
@include md-core();

.default-theme {
  // Define a theme.
  $primary: md-palette($md-cyan, 500);
  $accent:  md-palette($md-amber, A200, A100, A400);
  $warn:    md-palette($md-deep-orange);

  // Create the theme object (a Sass map containing all of the palettes).
  $default-theme: md-light-theme($primary, $accent, $warn);
}

And here is the screen error:

Could someone help me? Thanks

[jelbourn]

@crisbeto I've known that this has been an issue for overlay-based components; simplest solution may be to allow users to add a class to the overlay container (and then document that approach for theming).