CSS not being applied on page. Ionic 4

Ionic Framework
1

I’m trying to apply css rules to specific page, but they are not being generated/applied, here is my code:

page.ts file:

import { Component, OnInit } from '@angular/core';
import { NavController,Platform,LoadingController,AlertController,ModalController  } from '@ionic/angular';

@Component({
  selector: 'app-xxxx',
  templateUrl: './xxxx.page.html',
  styleUrls: ['./xxxx.page.scss'],
})
export class XxxxPage implements OnInit {

  constructor(public alertCtrl: AlertController) { 
    this.alertCtrl.create({header: 'No Stores',
																		  subHeader: 'There are no stores in your vicinity!',
																		  buttons: ['OK']
																		}).then(alert=>alert.present());
  }

  ngOnInit() {
  }


}

html:

<ion-header>
  <ion-toolbar>
    <ion-title>xxxx</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

scss:

.alert-wrapper{
    max-width: unset !important;
    width: 100% !important;
}

I would expect the alert window to take up 100% width, but it’s not. Inspecting the html elements the css rule doesn’t even exists.

Adding the rule in the global.scss works but I’m not looking to change the style globally just for one component.

What am I’m missing?

2

The fact that overlays (such as alerts) don’t belong to particular pages as far as DOM organization is concerned, so global settings are the only way to catch them.

3

Buggers. OK, thanks for that, I will look on how to address this then, at least I know.