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

标签： csscomponentsmarkdownborder

Answer 1

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.