Unable to style encapsulated components

[kbtz]

In the example below I use the list component and try to apply a background color on list items when the item is hovered. However _ngcontent attributes are added to my CSS selectors and some of the elements generated HTML seems to not receive this attribute making impossible to apply any style to it.

http://plnkr.co/edit/Sgr8DI9hWnOItPWR9Tva?p=preview

Original Style

I've tried different rules just in case...

  md-list-item:hover {
    background:red;
  }

  md-list-item:hover > div{
    background:green;
  }

  md-list-item > div:hover{
    background:blue;
  }

Injected Style

  md-list-item[_ngcontent-pgx-1]:hover {
    background:red;
  }

  md-list-item[_ngcontent-pgx-1]:hover > div[_ngcontent-pgx-1]{
    background:green;
  }

  md-list-item[_ngcontent-pgx-1] > div[_ngcontent-pgx-1]:hover{
    background:blue;
  }

Generated HTML

<md-list _ngcontent-pgx-1="" dense="" role="list">
    <md-list-item _ngcontent-pgx-1="" role="listitem" class="md-2-line">
        <div class="md-list-item">
            <div class="md-list-text">
                {{ ... }}
            </div>
        </div>
    </md-list-item>
</md-list>

I can't find a way to match the generated div.md-list-item from the component style.

[jelbourn]

We're still working on theming (see #123) and general strategy for component customization. Stay tuned for more info in the future!

[jmcgoldrick]

You can get at them with either /deep/ or >>> (even though they are deprecated in CSS) angular supports them. see the page on styling on the angular.io site

[russelltrafford]

Now also deprecated in Angular!

[mackelito]

But you can still use ::ng-deep

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