如何将css应用于离子警报内的文本？

Question

我有一个警告，我有一些文字和一个ionicon，我想改变它的颜色，并调整其大小和位置（中心），我创建了一个css类试图应用它，但它不起作用，甚至认为HTML似乎工作，我用<b>标签就好了。 我的代码：

async presentAlertError(data) {
    const alert = await this.alertController.create({
      header: 'Confirmation',
      message: '<ion-icon name="close" class="custom-icon-notfound" > </ion-icon>'  + "Registration " + data.statusText,
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (aux) => {
            console.log('Confirm Cancel: aux');
          }
        }, {
          text: 'Scan Next',
          handler: () => {
            this.scanCode();
            console.log('Confirm ');
          }
        }
      ]
    });
    await alert.present()

我应该以不同的方式做到这一点吗？

Answer 1

离子警报不显示在主页或（无论你有警报的页面/组件）阴影DOM，因此如果你在那里添加样式不会影响它，你必须将样式添加到同一范围内的元素作为警报。我将类添加到variables.scss，因为它具有最高的范围：

variables.scss-

   .secondary {
            color: #A0A !important;
            font-size: 2em !important;
        }

   .custom-icon-notfound {color: red}

还需要添加！重要，所以它忽略了以前的造型。