Как применить CSS к тексту внутри ионного оповещения? - PullRequest
Новая
       28

Как применить CSS к тексту внутри ионного оповещения?

2 голосов
/ 04 апреля 2019

У меня есть предупреждение, где у меня есть текст и один ионик, и я хочу изменить его цвет и настроить его размер и положение (в центре), и я создал класс CSS, пытался применить его, но он не работает, даже подумалКажется, HTML работает, я просто использовал тег <b>.
Мой код: 

async presentAlertError(data) {
    const alert = await this.alertController.create({
      header: 'Confirmation',
      message: '<ion-icon name="close" class="custom-icon-notfound" > </ion-icon>'  + "Registration " + data.statusText,
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (aux) => {
            console.log('Confirm Cancel: aux');
          }
        }, {
          text: 'Scan Next',
          handler: () => {
            this.scanCode();
            console.log('Confirm ');
          }
        }
      ]
    });
    await alert.present()

Должен ли я сделать это по-другому?

1 Ответ

1 голос
/ 04 апреля 2019

Ион-оповещение не отображается на домашней странице или (независимо от того, на какой странице / компоненте у вас есть оповещение) теневого DOM, поэтому стилизация не повлияет на него, если вы добавите его туда, вы должны добавить стили к элементу, который находится в та же область, что и предупреждение. Я добавил класс в variables.scss, так как он имеет самую большую область видимости:

variables.scss- 

   .secondary {
            color: #A0A !important;
            font-size: 2em !important;
        }

   .custom-icon-notfound {color: red}

enter image description here

также нужно добавить! Важный, поэтому он игнорирует свой предыдущий стиль.

...