Как назначить cssClass для кнопки внутри ActionSheetController в приложении Ioni c 5 Angular?

Question

Я пытаюсь добавить класс CSS к кнопке внутри ActionSheetController в моем приложении Ioni c 5 Angular, но класс не назначается.

Я посмотрел некоторые решения онлайн, которые предлагают разместить код 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;
    }
}

Когда я открываю контроллер, кнопка не красная. Может кто-нибудь сказать мне, какие изменения мне нужно сделать, чтобы это работало?

Answer 1

Не добавляйте его к app.component.scss. Он должен быть в global.scss в папке приложения. Также рекомендуется использовать переменные css для стилизации компонентов ioni c. В этом случае это должно быть что-то вроде:

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