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

Question

大家好

我希望还没有人问过这个问题……我发现了一些类似 的 帖子，但它不适用于 Ionic 4.0。他们在这里的建议似乎对我不起作用，因为 Ionic 4.0 似乎没有注入相同的

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

链接帖子中讨论的元素。

我正在努力更改 Ionic 4.0 ion-item 元素的背景颜色。我试图给它一个白色背景，而应用程序有一个蓝色背景。

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

这是我的代码示例：

 <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;
}

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

任何建议将不胜感激。

原文由 phunder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用这个特殊的离子 CSS 规则：

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

原文由 labago 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
      }

原文由 Kapil Raghuwanshi 发布，翻译遵循 CC BY-SA 4.0 许可协议