如何通過父級將css應用於角度的子組件

Question

我有一個Angular 13應用程序和幾個組件結構如下所示

1. 標志組件

   <svg enable-background="new 0 0 2014 1674.641" version="1.1" viewBox="0 0 2014 1674.641" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"> </svg>

2. 標頭組件

   <div class="appHeader"> <a href="https://mysite"> <app-logo> </app-logo> </a>

我正在嘗試從header-component設置 svg ( logo-component ) 的寬度和高度

header.component.css

  .appHeader svg 
   {
    width: 20rem;
    height: 3.5rem;
   }     

但是，這種方式用於 svg 徽標的 CSS 不會被反映。 如何將 CSS 從其父組件應用到此類子組件？

謝謝！

Answer 1

由於組件樣式默認封裝。 您應該使用::ng-deep禁用該規則的視圖封裝

::ng-deep .appHeader svg {
    width: 20rem;
    height: 3.5rem;
 }