在 Ionic 4.0 中更改 ion-item 背景颜色

Posted

技术标签:

【中文标题】在 Ionic 4.0 中更改 ion-item 背景颜色【英文标题】:Change ion-item background color in Ionic 4.0 【发布时间】:2019-06-03 02:24:31 【问题描述】:

大家好

我希望还没有人问过这个问题...我发现了一些类似的帖子,例如this one,但它不适用于 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;

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

任何建议将不胜感激。

【问题讨论】:

你可以在stackblitz中设置你的相关代码fork它并发布链接:stackblitz.com/edit/ionic-fhhzdy?file=pages%2Fhome%2Fhome.css 它适用于我:stackblitz.com/edit/ionic-kecw4y?file=pages%2Fhome%2Fhome.html 【参考方案1】:

我在 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;
      

【讨论】:

【参考方案2】:

如果要改变多个元素的背景色

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

【讨论】:

【参考方案3】:

这适用于离子 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 e 插入代码:

.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 中调用透明色

<ion-item color="transparent">

</ion-item>

【讨论】:

【参考方案4】:

尽管@labago answer 部分有效,但没有一个答案对我完全有效。

--ion-background-color 仅适用于没有任何填充或边距的静态内容。一旦我开始应用填充,它就没有给出预期的结果,所以下面是我在我的应用中使用的解决方法:

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

【讨论】:

【参考方案5】:

使用这个特殊的 ionic CSS 规则:

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

【讨论】:

如果我应用填充,那么它不会按预期工作。请看我的answer【参考方案6】:

我似乎找到了解决办法。您只需将 color="light" 添加到 ion-item 元素。请看下面:

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

问题是其他代码是根据我的主题注入的,我从变量中将其设置为我的原色,所以我需要指出我再次使用浅色主题(我已经设置为#fff在我的变量中)。

希望这对将来的人有所帮助:)

【讨论】:

这是正确的,谢谢!我想知道原因的技术解释是什么。 我们如何使用 ngStyle 应用背景颜色?不起作用。我需要基于数组渲染 ion-item 元素,并从每个项目动态设置背景颜色。 也许你可以定义几个类,每个类都有不同的颜色。然后,您可以有条件地应用每个类,而不是尝试对每个类应用内联样式。像:.class-one ion-item --ion-background-color:#fff; .class-two 离子项 --ion-background-color:#000;

以上是关于在 Ionic 4.0 中更改 ion-item 背景颜色的主要内容,如果未能解决你的问题,请参考以下文章

ionic 4 在离子项目中聚焦时更改离子标签颜色

如何在 Ionic 2 中使 ion-item 允许溢出?

如何在 IONIC 3 的 ion-item 部分中显示两个 ion-col 场

无法绑定到“ngForOf”,因为它不是 Ionic / Angular 9 中“ion-item”的已知属性

ion-item 内部的 SCSS 样式(Ionic 框架)

离子条件无行改变