如何在AngularDart中使用角度組件的App佈局更改標題顏色

Question

如何在AngularDart項目中使用角度組件的應用佈局更改背景顏色。我嘗試過，但沒有影響背景藍色。

layout_component.html

<header class="material-header shadow"> 
<div class="material-header-row"> 
    <material-button class="material-drawer-button" icon (trigger)="drawer.toggle()"> 
     <material-icon icon="menu"></material-icon> 
    </material-button> 
    <span class="material-header-title">Mobile Layout</span> 
    <div class="material-spacer"></div> 
    <nav class="material-navigation"> 
     <material-button class="material-drawer-button" icon (trigger)=""> 
      <material-icon icon="favorite"></material-icon> 
     </material-button> 
    </nav> 
    <nav class="material-navigation"> 
     <material-button class="material-drawer-button" 
         icon 
         popupSource 
         #source="popupSource" 
         (trigger)="basicPopupVisible = !basicPopupVisible"> 
      <material-icon icon="more_vert"></material-icon> 
     </material-button> 
     <material-popup defaultPopupSizeProvider 
         enforceSpaceConstraints 
         [source]="source" 
         [(visible)]="basicPopupVisible"> 
      <div class="basic"> 
       Hello, I am a pop up! 
      </div> 
     </material-popup> 
    </nav> 
    <nav class="material-navigation"> 
     <div href="#AppLayout">SIGN IN</div> 
    </nav> 
</div> 

layout_component.css

.material-header-row { 
background-color: black; 
} 

.basic { 
    height: 200px; 
    padding: 16px; 
} 

謝謝

Answer 1

如果您的樣式添加到一個括號t分量（AppComponent），可以使用::ng-deep通過組件形式封裝的界限刺穿（從父母到子女）

::ng-deep header.material-header { 
    background-color: black; 
} 

或者用你的代碼示例

::ng-deep .material-header-row { 
    background-color: black; 
} 

更新

對於上面的選擇器，特異性不足以覆蓋背景顏色。

這爲我工作：

::ng-deep header.material-header.material-header { 
    background-color: black; 
} 

如果添加樣式index.html，不需要::ng-deep。

Angular會重寫添加到組件的樣式選擇器，以匹配類似class="_ngcontent-qbq-3"的類，以便與每個組件（每個組件具有不同的編號）相匹配以強制樣式封裝。

添加到index.html的樣式不會被重寫，並且這些類將被忽略。

您可能還需要::ng-deep爲HTML添加[innerHTML]="..."或someElement.append(...)因爲HTML添加這種方式並沒有得到補充類和CSS選擇器添加到組件將因此不重寫後一致了。