在Ionic 4.0中更改离子项目背景颜色

Question

大家好

我希望没有人问过这个尚未...我已经发现了一些类似的帖子喜欢这一个，但它不工作离子4.0。他们在这里提出的建议似乎对我不起作用，因为Ionic 4.0似乎无法注入同样的效果

<div class='item-content'></div>

链接文章中讨论的元素。

我正在努力更改离子4.0离子项目元素的背景颜色。我正在尝试给它提供白色背景，而应用程序具有蓝色背景。

我可以在代码检查器中看到它正在应用我的样式，但是它没有显示在浏览器中。

这是我的代码示例：

<ion-item class="light-back">
  <ion-icon name="search" color="light"></ion-icon>
    <ion-input required type="text" placeholder="Search for a site" color="light">
  </ion-input>
</ion-item>


.light-back{
    background-color: #fff;
}

以下是我正在查看的屏幕截图，显示该元素（搜索栏）正在接收样式，但未实现或未显示它。

任何建议将不胜感激。

Answer 1

使用以下特殊的离子CSS规则：

ion-item{
   --ion-background-color:#fff;
}

Answer 2

我在 ionic 4 中找到了工作的一个。在你已经实现 ion-list 和 ion-item 的 .scss 文件中应用以下 2 css：

    ion-item {
         --ion-background-color: white !important;
    }

      .item, .list, .item-content, .item-complex {
        --ion-background-color: transparent !important;
      }