イオン2成分テンプレートにCSSを追加するには

Question

このコードにCSSを追加しますが、インラインではしたくありません。 scssクラスでそれを変更すると、要素に適用されていないようです。

これはこれは.TSでpopovercontent HTML

<ion-content #popoverContent class="popover-page"> 

<div id="map" #popoverText ></div> 

をですが、私は.scssファイルでこれを変更するときに、それは何も

を行いません

@Component({ 
template :` 
<ion-list> 
    <ion-list-header>Ionic</ion-list-header> 
    <button ion-item (click)="close()">Learn Ionic</button> 
    <button ion-item (click)="close()">Documentation</button> 
    <button ion-item (click)="close()">Showcase</button> 
    <button ion-item (click)="close()">GitHub Repo</button> 
</ion-list>` 
}) 

export class PopoverPage { 
constructor(public viewCtrl: ViewController) {} 

close() { 
this.viewCtrl.dismiss(); 
} 

を提出します

ion-list-header { 
    background-color: red; 
} 

私は本当にインラインCSSを追加したくないです、誰もそれを修正する方法のアイデア？

Answer 1

親タグにidを指定してください。

@Component({ 
template :` 
<ion-list id="il1"> 
    <ion-list-header>Ionic</ion-list-header> 
    <button ion-item (click)="close()">Learn Ionic</button> 
    <button ion-item (click)="close()">Documentation</button> 
    <button ion-item (click)="close()">Showcase</button> 
    <button ion-item (click)="close()">GitHub Repo</button> 
</ion-list>` 
}) 

次に、scssを追加します。

#il1{ 
    ion-list-header { 
    background-color: red; 
    } 
} 

これが優先されます。