ion-item / ion-native 背景颜色答案

【问题标题】：ion-item / ion-native background colorion-item / ion-native 背景颜色
【发布时间】：2019-08-01 16:15:57
【问题描述】：

我遇到了 ion-item 背景颜色的问题。

我想要什么：

将背景颜色设置为透明。

我有什么：

<ion-item class="custom-ion-toggle">
    <ion-label>Remember me!</ion-label>
    <ion-toggle formControlName="remember" slot="start" color="secondary" mode="ios"></ion-toggle>
</ion-item>

这会生成一个带有白色背景的<div class="item-native">。

我尝试做的事情：

app.component.scss：

.item-native {
    background: transparent !important;
}

所以这就是我得到的：

【问题讨论】：

我也试过了：global.scss：.custom { &-ion-toggle { .item-native { background: transparent !important; } } }

标签： css angular ionic-framework sass ionic3

【解决方案1】：

在 login.scss 中试试这个

 .custom-ion-toggle{
       background-color: transparent !important;
   }

我已经在我的应用程序中尝试过了，它工作得很好。

【讨论】：

嗯，谢谢你的回答。不幸的是，它对我不起作用。事实上，它改变了ion-item 背景，但它已经设置为transparent。我必须操作的标签是div class="item-native">，但我无法操作它的 CSS 属性...

【解决方案2】：

使用 Ionic 提供的 ion-item CSS 自定义属性：

.custom-ion-toggle {
  --background-color: transparent;
}

【讨论】：

【解决方案3】：

在你的 CSS 页面中试试这个：

ion-item {
  --ion-background-color: transparent !important
}

【讨论】：

【解决方案4】：

使用 ion-list 代替 ion-item 可以解决问题

【讨论】：

【解决方案5】：

在你的 CSS 样式中使用它：

ion-item {
 --background: transparent !important;
}

【讨论】：