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

Question

大家好！

我希望没有人问过这个问题……我发现了类似this one之类的帖子，但不适用于Ionic 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;

}

Answer 3

如果要更改

中多个元素的背景颜色

 <ion-item style="--ion-background-color: rgb(206, 197, 148);">
    <ion-textarea autofocus id="textinput" type="text" value="escribe un mensaje" style="width: 90%; height: 70%;  font-family: 'Gil Sans';"></ion-textarea>
    <ion-icon name='send'></ion-icon>
</ion-item>

Answer 4

尽管@labago answer部分起作用，但没有一个答案完全对我有用。

--ion-background-color仅适用于静态内容，没有任何填充或边距。一旦我开始应用填充，它并没有达到预期的效果，因此以下是我在应用中使用的解决方法：

ion-item {
  padding:20px;
  --ion-background-color: blue;
  background: blue; 
}

Answer 5

我似乎找到了解决方法。您只需要在ion-item元素中添加color =“ light”。请看下面：

    brew install coreutils

问题是，根据我的主题注入了其他代码，该主题是我从变量中设置为原色的，因此我需要指出我再次使用了浅色主题（我已经将其设置为#fff在我的变量中）。

希望这对以后的人有所帮助：）

Answer 6

这适用于离子4

1-打开文件：src / theme / variables.scss 2-插入代码颜色：

  /** transparent **/
  --ion-color-transparent: #fafafa;
  --ion-color-transparent-rgb: 245, 61, 61;;
  --ion-color-transparent-contrast: #ffffff;
  --ion-color-transparent-contrast-rgb: 255, 255, 255;
  --ion-color-transparent-shade: #dcdcdc;
  --ion-color-transparent-tint: #fbfbfb;

obs：#fafafa对应于透明颜色

2-打开文件global.scss并插入代码：

.ion-color-transparent {
    --ion-color-base: var(--ion-color-transparent) !important;
    --ion-color-base-rgb: var(--ion-color-transparent-rgb) !important;
    --ion-color-contrast: var(--ion-color-transparent-contrast) !important;
    --ion-color-contrast-rgb: var(--ion-color-transparent-contrast-rgb) !important;
    --ion-color-shade: var(--ion-color-transparent-shade) !important;
    --ion-color-tint: var(--ion-color-transparent-tint) !important;
}

3-在离子项目中调用透明颜色

<ion-item color="transparent">

</ion-item>