如何使用 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

正如您在 the docs 中看到的那样，您需要设置 --background [=29=，而不是设置 background ] 自定义属性.

请尝试将以下内容添加到 global.scss 文件中：

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

据我所知，您不能在页面 scss 文件中添加此样式规则，因为 ion-alert 元素是全局元素，不是页面的一部分。

一般来说，如果您想更改任何 Ionic 组件的样式，请始终先检查该组件的 CSS custom properties section 以查看是否有任何 CSS 可用于该更改的变量。如果不是，并且如果您要更改的元素不是组件阴影 DOM 的一部分，您可以像在 Ionic 3 应用程序中那样使用 CSS 样式规则。

如何使用 ionic 4 更改警报控制器背景颜色

how to change alert controller background color using ionic 4

angular

ionic4