Question:

I am trying to extend Angular Material component to give custom CSS . I wish to use the same component but just change the CSS . If its theme, I can change the properties but I want to change the style which is hardcoded in the component. So, I am trying to extend the component. Here is what I did.

@Component({ selector: 'my-tab-nav-bar', styles: [``] // custom css here }) export class TabNavBarComponent extends MdTabNavBar { }

This fails as template is not specified . So I add template too. So, I copy paste the template .

@Component({ selector: 'my-tab-nav-bar', template: `<div class=\"mat-tab-links\"> <ng-content></ng-content> <md-ink-bar></md-ink-bar> </div> `, styles: [``] // custom css here }) export class TabNavBarComponent extends MdTabNavBar { }

Now the problem is it doesn't know what is md-ink-bar and its not exported in angular . Is there anyway I can extend just changing the css.

<strong>This is a workaround</strong>

I created a new directive

@Directive({ selector: '[myTabNavBar]', }) export class TabNavBarDirective { @HostBinding('style.background-color') backgroundColor: string = 'yellow'; }

Source code from <a href="https://stackoverflow.com/questions/35915433/angular2-styles-in-a-directive" rel="nofollow">How to add CSS to directive</a>

In my HTML,

<nav myTabNavBar md-tab-nav-bar flex>

This works for the time being. But still I am curious how to <em>extend</em> components style.

This is documented under the guides section of the Angular Material site (it probably wasn't there when the question was posted): <a href="https://material.angular.io/guide/customizing-component-styles" rel="nofollow">https://material.angular.io/guide/customizing-component-styles</a>

It sounds like the issue with your styles is either view encapsulation or specificity.