2017-09-05 26 views
0

AngularDart 프로젝트에서 각도 구성 요소의 응용 프로그램 레이아웃을 사용하여 배경색을 변경하는 방법은 무엇입니까? 나는 그것을 시험해 보았지만 배경 푸른 색에는 영향을주지 않았다. enter image description hereAngularDart에서 각도 구성 요소의 App 레이아웃을 사용하여 머리글 색을 변경하는 방법

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; 
} 

당신은

답변

0

당신은 괄호에 스타일을 추가하는 경우 감사 t 구성 요소 (AppComponent) 당신이 (아이들로 부모) 구성 요소의 스타일 캡슐화 경계를 관통하는 ::ng-deep을 사용할 수 있습니다

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

또는 사용하도록 코드 예제

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

업데이트

위의 선택자의 경우, 특이성이 배경색을 무시할만큼 높지 않았습니다.

은 나를 위해 일한 : 당신이 index.html에 스타일을 추가하는 경우

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

::ng-deep이 필요하지 않습니다.

각도는 class="_ngcontent-qbq-3"과 같은 클래스와 일치하도록 구성 요소에 추가 된 스타일 선택기를 다시 작성하여 스타일 캡슐화를 적용하기 위해 각 구성 요소에 다른 번호가 추가됩니다.

index.html에 추가 된 스타일은 다시 작성되지 않으며 이러한 클래스는 무시됩니다. HTML이 추가 된 클래스와 CSS에 대한 선택기 따라서 더 이상 재 작성 후 일치하지 않습니다 구성 요소에 추가하지 않고이 방법을 추가하기 때문에 당신은 또한 HTML에 대한 ::ng-deep을해야 할 수도 있습니다

[innerHTML]="..." 또는 someElement.append(...)로했다.

+0

알 수없는 의사 선택기 'ng-deep'수정 방법 –

+0

"수정"또는 "알 수 없음"이란 무엇을 의미합니까? –

+0

CSS에서 사용하는 동안 오류가 발생했습니다 –