如何将 css 添加到离子 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;
  }
}

这将优先。