ionic-framework - 如何将 css 应用到 ionic 警报内的文本？

Question

我有一个警报，其中有一些文本和一个 ionic 图标，我想更改其颜色并调整其大小和位置(中心)，我创建了一个 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

ionic 警报不会显示在主页或(无论您在哪个页面/组件上发出警报)影子 DOM 中，因此如果您将其添加到那里，样式不会影响它，您必须将样式添加到位于与警报的范围相同。我将该类添加到variables.scss，因为它具有最高的范围:

变量.scss-

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

   .custom-icon-notfound {color: red}

还需要添加 !important，这样它就会忽略之前的样式。