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 ，我的 table 上没有应用任何样式，所以我被迫使用它。它工作正常，我的表格现在有边框，但它会影响我的其他组件，如何解决？

编辑:这是我的模板:
<div markdown [src]="data"></div>

Answer 1

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

:host ::ng-deep .my-class

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