如何将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

ion-alert 不会显示在主页或（无论您在哪个页面/组件上）shadow DOM 中，因此如果您在那里添加样式不会影响它，您必须将样式添加到其中的元素与警报范围相同。我将该类添加到 variables.scss 中，因为它具有最高范围：

variables.scss-

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

   .custom-icon-notfound {color: red}

还需要添加 !important 以便它忽略之前的样式。