Overriding the encapsulated CSS of external component

Issue

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?

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.

Answered By - Meir