Overriding the encapsulated CSS of external component

angular, angular-material, css

Solution

You can use the special css `/deep/` instruction. See the documentation

So, if you have

app
  sub-component
    target-component
      <div class="target-class">...</div>

You can put in your apps css (or less):

/deep/ .target-class {
  width: 20px;
  background: #ff0000;
}

Obviously, you can put this css fragment in `sub-component` as well.

Problem

I was wondering how to override the encapsulated CSS of an external component. So I am using material2 in my project and the tabs component has a the attribute overflow set on `tab-body`. Is it possible to override the overflow value?

Original source