如何在离子警报内的文本上应用CSS？

Question

我有一个警报，其中有一些文本和一个离子子，我想更改其颜色并调整其大小和位置（中心），并创建了一个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}

还需要添加！important，因此它会忽略其以前的样式。