如何使用 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 样式规则。