::ng-deep 改变其他组件样式答案

【问题标题】：::ng-deep changes other components style::ng-deep 改变其他组件样式
【发布时间】：2020-05-12 16:59:37
【问题描述】：

我正在使用 .md 文件在 Material for Angular 的对话框中显示信息。问题是markdown文件中的表格，当它们显示在DOM中时，没有边框。所以我尝试添加一些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;
}

如果不加::ng-deep，我的表格没有应用任何样式，所以我不得不使用它。它工作正常，我的表格现在有边框但它影响了我的其他组件，如何解决这个问题？

编辑：这是我的模板：

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

【问题讨论】：

将唯一的class 设置为那些你也想应用css的DOM...并使用.yourClass ::ng-deep...
奇怪的结果：边框根本没有应用在我的桌子上，而是应用在作为我的降价内容容器的 div 上。
那是因为我的模板是：

标签： css components markdown border

【解决方案1】：

我希望我已经清楚地理解了您的问题。如果您试图影响子组件的样式而不影响所有其他组件，请在 ::ng-deep 之前使用 :host。

:host ::ng-deep .my-class

这只会更改您更改样式的组件中的样式。

【讨论】：

【解决方案2】：

答案是将父类添加到对话框并使用::ng-deep 仅为该组件应用样式

您可以向对话框添加类，如下所示

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

并将样式添加为

.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;
}

说明：材质对话框是动态组件

静态组件 HTML

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

静态组件 CSS

table[_ngcontent-c0] { ... }

动态组件 HTML

<table>...</table>

动态组件 CSS

table { ... }

注意静态组件属性 _ngcontent-c0 的区别是由 Angular 添加的，Angular 使用此技术创建组件特定样式（为该特定组件应用样式），但对于动态组件没有添加任何属性。 这就是您的静态组件样式未应用于动态组件的原因

为了完成这项工作，我们在任何类之前使用::ng-deep 删除该属性_ngcontent-c0 并选择动态组件，所以当使用::ng-deep 时，您的样式不再是特定于组件的（它将应用于所有组件）。这就是我们使用父类仅为该组件应用样式并动态创建组件的原因。

【讨论】：