如何防止 Angular 組件樣式覆蓋轉移到其他組件？

Question

我有幾個 Angular 組件可以來回路由。 他們都有mat-form-field的。 在一個組件中，我覆蓋了下划線組件的樣式，如下所示：

::ng-deep .mat-input-underline {
  display: none;
}

當我點擊鏈接返回到另一個組件時，上面定義的樣式繼續存在，下划線組件消失了。 我嘗試添加樣式，如：

::ng-deep .mat-input-underline {
  display: revert;
  //or
  display: unset;
  //or
  display: initial;
}

但它們都不起作用。 如何僅覆蓋一個組件而不是其他組件的材料設計樣式？

Answer 1

您的問題是由 ::ng-deep 引起的，它會在加載組件並注入樣式后將樣式應用於頁面中的所有 .mat-input.underline 元素。

如果你真的想保留 ::ng-deep 組合器，你可以添加 :host 選擇器到你的規則的前綴，這將針對宿主元素並且不會將 css 泄漏到其他組件（除了子組件）

:host ::ng-deep .mat-input-underline
{
  display: none;
}

https://angular.io/guide/component-styles#host

Answer 2

我假設您正在使用 Angular Cli 來生成您的組件...

您需要模擬Component上的encapsulation屬性。 盡管 Angular 默認為“模擬”。 （感謝大衛糾正我）。

簡而言之， Emulated允許您的組件使用全局樣式，同時保留其自身的本地樣式。

@Component({
  selector: 'app-child-component',
  template: `<div class="parent-class">Child Component</div>`,
  encapsulation: ViewEncapsulation.Emulated
})

此外， ::ng-deep旨在將樣式從父母傳遞給孩子。 因此，如果您試圖阻止您的孩子元素采用其父母的風格，那么使用它對您不利。

Answer 3

"/deep/" 已棄用，"::ng-deep" 是方法，但要小心。 請閱讀以下官方文檔以獲取詳細信息。

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Answer 4

以這種方式為您的組件設置樣式，此樣式不會泄漏到子組件。 在 :host 中使用 ::ng-deep 但與我在下面所做的完全一樣。

:host {
        ::ng-deep p, .py-8 {
            margin: 0 !important;
        }
    }