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

Question

我有一个警报，其中有一些文本和一个离子图标，我想更改其颜色并调整其大小和位置（中心），我创建了一个 css class 尝试应用它但它不起作用，即使认为 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 或（无论 page/component 你有什么警报）阴影 DOM 所以如果你在那里添加它，样式不会影响它，你必须添加与警报在同一范围内的元素的样式。我将 class 添加到 variables.scss，因为它具有最高范围：

variables.scss-

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

   .custom-icon-notfound {color: red}

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

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

How to apply css to text inside an ionic alert?

alert

sass

ionic-framework