Angular ::ng-deep 仅适用于子组件答案

【问题标题】：Angular ::ng-deep only for child componentAngular ::ng-deep 仅适用于子组件
【发布时间】：2020-07-20 13:38:35
【问题描述】：

我想给“mat-autocomplete-panel”留边距

我在四个不同的组件中使用了这个选择框组件。我想改变 .mat-autocomplete-panel 只为其中一个设置边距，我不想影响其他人。

所以我的问题基本上是：

当我使用以下代码时，所有子组件都会受到影响，但我想只给其中一个留出余量

::ng-deep .mat-autocomplete-panel {
  margin-left: -1200px;
}

我也尝试过以下代码，但没有成功。

:host ::ng-deep .mat-autocomplete-panel {
  margin-left: -1200px;
}

我使用 cli ng g c 创建所有组件，它们使用 .scss 文件，我已将它们更改为 .css，但效果不佳。

【问题讨论】：

尝试为其中一个父组件提供边距，或者在使用 ng-deep 时尝试提供更具体的路径，例如“.parent .mat-autocomplete-panel”
您的答案超出了范围，我实际上可以覆盖父组件，但我不想这样做。因为如果我覆盖它所有子组件都会受到影响而不是这样做我需要覆盖（实际上不是覆盖编辑）mat autocomplete panel for only一个子组件。

标签： css angular-material angular7

【解决方案1】：

您可以将自动完成面板包装在某个 div 中，例如

<div class="autocomplete-wrapper">
   <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
 </div>

end 然后使用这种风格：

:host .autocomplete-wrapper ::ng-deep .mat-autocomplete-panel  {
  margin-left: -1200px;
}

【讨论】：

我试过了。没用也没效果，谢谢。