Components: Some sass selector expressions don't work when nested in a theme class

[xmeng1]

Bug, feature request, or proposal:

I have searched this problem and find https://github.com/angular/material2/issues/2662, but when I try to use it I found, the select component still has a problem.

After setting the theme for the overlay container, the overlying theme of select is changed.

However the problem is the Placeholder and the underline, the color is still the previous theme

I try to find the reason of the issue and find that there are some CSS define for the placeholder and underline as follows:

material2-master/src/lib/select/_select-theme.scss

.mat-select-trigger {
    color: mat-color($foreground, hint-text);

    .mat-select:focus:not(.mat-select-disabled) & {
      color: mat-color($primary);
    }

    .mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) & {
      color: mat-color($warn);
    }
  }

  .mat-select-underline {
    background-color: mat-color($foreground, divider);

    .mat-select:focus:not(.mat-select-disabled) & {
      background-color: mat-color($primary);
    }

    .mat-select:not(:focus).ng-invalid.ng-touched:not(.mat-select-disabled) & {
      background-color: mat-color($warn);
    }
  }

So when the Select is focused, these CSS Pseudo-Classes is activated, and the color is the previous theme. I think all DOM add a class of new theme .xxxxx (such as .red-indigo), but the pseudo-class is activated, this new theme class is not added.

I try to solve it, but I cannot find the related code to add class to the DOM

I make a demo and deploy on Firebase

https://github.com/xmeng1/ng2-material-admin

https://ng2-material-admin.firebaseapp.com/

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

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

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

Is there anything else we should know?

[xmeng1]

By the way, I think the placeholder of input has the same problem which not display the primary color,

[xmeng1]

I found another issue for the overlay if I put two Select in one component, and one is use system theme. the other one is put into the second theme. The expected behaviour is the first use the system theme, the second use the second theme. But I think current implementation, all the overlay will add the second class name.

[jelbourn]

Took @kara a while to figure this out, but this is indeed a real bug.

The issue is that some styles are using the sass & symbol like this:

    .mat-select:focus:not(.mat-select-disabled) & {
      background-color: mat-color($primary);
    }

The problem is that & expands to the _entire_ parent selector, which in this case includes the theme class, so that the output is

    .mat-select:focus:not(.mat-select-disabled) .red-indigo .mat-select-trigger {
      background-color: ...
    }

To fix this, theming files should never use the & symbol at the _end_ of a selector expression.

[xmeng1]

@jelbourn you are right, I just replace the Ampersand to the normal format in _theming.scss, the multiple themes work well now. Maybe I could try to fix it later.

[angular-automatic-lock-bot[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._}