Question

我想将css添加到此代码中，但我不想内联。当我在scss类中更改它时，它似乎不适用于元素。

这是html

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

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

这是.ts文件中的popovercontent

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

这将优先考虑。

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

1 个答案: