::ng-deep changes other components style

Question

I am using a .md file to display information in a dialog from Material for Angular. The thing is that tables in markdown files, when they are displayed in the DOM, there are no borders. So I tried to add some css.

::ng-deep table {
  border-collapse: collapse;
  border-spacing: 0;
  border:2px solid black;
}

::ng-deep th {
  border:2px solid black;
}

::ng-deep td {
  border:1px solid black;
}

If don't add ::ng-deep, no style is applied on my table, so I am forced to use it. It works fine, my table now has borders but it affects my other components, how to fix that ?

EDIT : this is my template :

<div markdown [src]="data"></div>

set unique `class` to those DOM you want too apply css on... and use `.yourClass ::ng-deep...` — לבני מלכה, Jan 27 '20 at 10:25
weird result : border is not at all applied on my table, but on the div which is the container of my markdown content. — licer93, Jan 27 '20 at 10:30

score 23 · Answer 1 · answered Jul 08 '20 at 07:20

I hope I have clearly understood your question. If you are trying to affect the style of a child component without affecting all the other components, use :host before ::ng-deep.

:host ::ng-deep .my-class

This will only change the style in the component in which you change the style.

score 5 · Accepted Answer · answered Jan 27 '20 at 11:38

Answer is add parent class to dialog and use ::ng-deep to apply styles for that component only

You can add class to dialog as shown below

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {name: this.name, animal: this.animal},
      panelClass: 'my-parent-class'
});

and add styles as

.my-parent-class ::ng-deep table {
  border-collapse: collapse;
  border-spacing: 0;
  border:2px solid black;
}

.my-parent-class ::ng-deep th {
  border:2px solid black;
}

.my-parent-class ::ng-deep td {
  border:1px solid black;
}

Explanation: Material dialog is a dynamic component

Static component HTML

<table _ngcontent-c0>...</table>

Static component CSS

table[_ngcontent-c0] { ... }

Dynamic component HTML

<table>...</table>

Dynamic component CSS

table { ... }

Notice the difference for static component attribute _ngcontent-c0 is added by angular, Angular use this Technic to create component specific styles (To apply styles for that particular component), but for dynamic component no attribute is being added. This is the reason your static component styles not applied to dynamic component

To make this work we used ::ng-deep before any class to remove that attribute _ngcontent-c0 and select dynamic component, so when ::ng-deep is used your styles are no more component specific (it will be applied to all components). This is the reason we use parent class to apply styles for that component only and dynamically created component too.

::ng-deep changes other components style

2 Answers2

Linked