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が必要とされていません。

角は、class="_ngcontent-qbq-3"などのクラスに一致するようにコンポーネントに追加されたスタイルセレクタを書き換え、スタイルカプセル化を適用するために各コンポーネントに（別々の番号を付けて）追加します。

index.htmlに追加されたスタイルは書き換えられず、これらのクラスは無視されます。 HTMLが追加されたクラスやCSSのセレクタは、したがって、もはや書き換え後に一致しない成分に追加取得していないこの方法を追加したので、あなたはまた、HTMLのため::ng-deepが必要になる場合があります

は[innerHTML]="..."かsomeElement.append(...)を追加しました。