如何使用 ionic 4 更改警報控制器背景顏色

Question

如何使用 ionic 4 更改離子控制器背景顏色。我嘗試了以下代碼：

async presentAlert() {
    const alert = await this.alertController.create({
      header: 'Add a new element',
      message: '<p> A great title is unique and descriptive! It should highlight the main attractions of your space.</p><p>Example</p><ul style="text-decoration:none"><li> Charming Victoria in the Mission.</li> <li>Cosy 2BD with Parking Included</li><li>Amazing View from a Mordern Loft</li></ul>',
      cssClass: 'alertCustomCss',
    });

    await alert.present();

CSS：

.alertCustomCss .alert-wrapper {
    background: #801ce4 !important;
  }

Answer 1

就像您在文檔中看到的那樣，您需要設置--background CSS 自定義屬性，而不是設置background 。

請嘗試將以下內容添加到global.scss文件中：

ion-alert.your-custom-class {
  --background: #801ce4;
}

據我所知，你不能在頁面scss文件中添加這個樣式規則，因為ion-alert元素是一個全局元素，不是頁面的一部分。

通常，如果您想更改任何 Ionic 組件的樣式，請始終首先檢查該組件的CSS 自定義屬性部分，以查看是否有任何可用於該更改的 CSS 變量。 如果不是，並且您想要更改的元素不是組件的 shadow DOM 的一部分，您可以像在 Ionic 3 應用程序中一樣使用 CSS 樣式規則。