时间戳

首页 > 解决方案 > 如何在 Ionic 5 Angular 应用程序中将 cssClass 分配给 ActionSheetController 内的按钮？

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

问题描述

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

我在网上查找了一些建议将 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();
    });

这是CSS中的app.component.scss：

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

当我打开控制器时，按钮不是红色的。有人可以告诉我我需要做哪些改变才能让它工作吗？

标签： angularionic-frameworkionic4

解决方案

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

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

推荐阅读