如何将 css 添加到 ionic 2 组件模板

Question

我想在这段代码中添加 css，但我不想内联。 当我在 scss 类中更改它时，它似乎没有应用于元素。

这是html

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

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

这是 .ts 文件中的弹出内容

@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();
}

所以当我在 .scss 文件中更改它时，它不会做任何事情

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

这将优先考虑。