cssangularangular-material

Overriding the encapsulated CSS of external component

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.