How do style a specific angular material component?

3
votes

I'm using angular material 2, but I think this also applies to angular material 1.

Let's say I want to use the angular material tabs, but I want to hide the tabs or add some specific styling to it.

So I have the following html/angular material code:

<md-tab-group>
    <md-tab>
        <template md-tab-label> <--- I want to style or hide all these. e.g. "height: 0"
            Some tab
        </template>
        <template md-tab-content>
            Some content. Perhaps other tab components.
        </template>
    </md-tab>
    <md-tab>
        <template md-tab-label> <--- I want to style or hide all these. e.g. "height: 0"
            Some tab
        </template>
        <template md-tab-content>
            Some content. Perhaps other tab components.
        </template>
    </md-tab>
</md-tab-group>

If I add a class to the "template md-tab-label"-tag it isn't added anywhere in the DOM structure. I can't just style the "md-tab-label"-class because that would apply the style everywhere and to all tabs. If I scope it from a parent element, it would apply to all nested tab components, that might be present in the tab content. If I try limiting the depth and create a really really specific selector based on the final DOM representation, I would be applying a style on a structure that I have no control over and which could change at any update.

Is there a right way to do this or do I just have to create a selector by deconstructing the DOM structure?

2
angular-materialangular-material2

2 Answers

0
votes

You can override material styling from your scss/css. Like this:

/deep/ .mat-tab-group.mat-primary .mat-ink-bar{ background-color: red; }

Due to view encapsulation, you need to use /deep/ selector that will allow you to get hold of the Material class added when the component is rendered.

0
votes

I would recommend to avoid /deep/, >>>, and ::ng-deep, because it is going to be depreciated. (And it does not look so clean)

As a solution i would deactivate view encapsulation on a component level.

@Component({ ​
  selector: 'app-card-list', ​
  templateUrl: './card-list.component.html', ​
  styleUrls: ['./card-list.component.scss'], ​
  encapsulation: ViewEncapsulation.None​
})

After that i would create a surrounding div with scss for the angular material component.

.surrounding-div { ​
  .mat-dialog { ​
    display: flex; ​
    flex-direction: row; ​
    ...​
  } ​
}

This is my favourite approach to style Angular Material Components. Have fun!