CODEWITHSUNDEEP
angularionic-frameworkionic4
user9847788
user9847788

Reputation: 2433

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

I am trying to add a CSS class to a button inside an ActionSheetController in my Ionic 5 Angular app, but the class isn't being assigned.

I've looked up some solutions online which suggest placing the CSS code in app.component.scss, I have tried that but it is still not working.

I'm creating the Controller in mechanic.page.ts below:

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();
    });

And here is the CSS in app.component.scss:

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

When I open the Controller, the button is not red. Can someone please tell me what changes I need to make in order for this to work?

Upvotes: 1

Views: 518

Answers (1)

alexortizl
alexortizl

Reputation: 2710

Don't add it to app.component.scss. It should be in global.scss in app folder. Also it's good practice to use css variables to style ionic components. In this case it should be something like:

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

Upvotes: 1

Related Questions