::ng-deep 更改其他组件样式

Question

我正在使用 .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>

Answer 1

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

:host ::ng-deep .my-class

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

Answer 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使用时您的样式不再特定于组件（它将应用于所有组件）。这就是我们使用父类仅为该组件应用样式以及动态创建的组件的原因。