::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

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

Answer 3

:host ::ng-deep .my-class

解决了问题