如何在 Ionic 5 Angular 应用程序中将 cssClass 分配给 ActionSheetController 内的按钮？

Question

我正在尝试将 CSS class 添加到我的 Ionic 5 Angular 应用程序中 ActionSheetController 内的按钮，但未分配 class .

我在网上查找了一些解决方案，建议将 CSS 代码放在 app.component.scss 中，我试过了，但仍然没有用。

我正在下面的 mechanic.page.ts 中创建控制器：

this.actionSheetCtrl.create({
      header: 'Choose an Action',
      cssClass: 'myPage',
      buttons: [
        {
          text: 'Book Appointment',
          cssClass: 'myActionSheetBtnStyle',
          icon: 'calendar-outline',
          handler: () => {
            this.goToProfile(mechanicId);
          }
        }
      ]
    }).then(actionSheetEl => {
      actionSheetEl.present();
    });

这里是 app.component.scss 中的 CSS：

.myPage {
    .myActionSheetBtnStyle {
        color: red;
    }
}

当我打开控制器时，按钮不是红色的。有人可以告诉我需要进行哪些更改才能使其正常工作吗？

Answer 1

不要将其添加到 app.component.scss。它应该在应用程序文件夹中的 global.scss 中。此外，使用 css 变量来设置离子组件的样式也是一种很好的做法。在这种情况下，它应该是这样的：

.myPage {
  .myActionSheetBtnStyle {
    --button-color: red;
  }
}

如何在 Ionic 5 Angular 应用程序中将 cssClass 分配给 ActionSheetController 内的按钮？

How to assign cssClass to button inside ActionSheetController in Ionic 5 Angular app?

ionic-framework

angular

ionic4