Search code examples
cssangularstylesng-deep

How to change styles of child mat angular component?

As angular official documentation says, ::ng-deep , >>>, /deep/ is deprecated and will be removed soon:

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

If i am using mat components like <mat-checkbox> or a more comprehensive one like <mat-table> how could I have some changes to that component from parent?

  1. Should I cancel view encapsulation for that component and write styles in .SCSS files?
  2. How do I edit styles of inner material angular component if deep selector is going to be removed?
  3. What is the proper way to do that?
Solution

  • As the mention document says you can use the combination of ::ng-deep with :host and it will be OK in this way.

    In order to scope the specified style to the current component and all its descendants, be sure to include the :host selector before ::ng-deep. If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components

    :host /deep/ h3 {
  font-style: italic;
}

    But, you also can use the custom CSS class & id to apply your custom css on .CSS or .SCSS files on the Angular Material Components. using .class & #id in combination with mat default classes works. In addition you can use custom Angular material classes in your componnent style files ( .CSS or .SCSS) to override the like this:

    .app-component-style {
/* All the CSS here */
.mat-tab-group .mat-tab-label {color: green;}
}

    So, keep using it as Dudewad mention here too: https://stackoverflow.com/a/49308475/4185370