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

Posted 2023-03-16

【中文标题】在 CSS 中更改 Ionic ion-item 的背景颜色

【英文标题】：Changing background color of Ionic ion-item in CSS

【发布时间】：2015-10-24 16:49:52

【问题描述】：

我添加了以下代码style="background-color: #C2A5A5 !important。但这对我不起作用。如何为 ion-item 添加背景颜色？提前致谢。

<ion-item class="item-remove-animate item-avatar item-icon-right" style="background-color: #C2A5A5 !important" ng-repeat="detail in details" type="item-text-wrap" ng-controller="ChatsCtrl"  ng-click="openShareModel(detail)">
    <img ng-src="profilepic.profileimageurl">

    <h2>detail.date | date :'fullDate'</h2>
    <h2>detail.title</h2>
    <p>detail.description</p>
    <i class="icon ion-chevron-right icon-accessory"></i>

    <ion-option-button class="button-assertive" ng-controller="ChatsCtrl" ng-click="remove(detail.id)">
      Delete
    </ion-option-button>

  </ion-item>

【问题讨论】：

你能在这里创建演示吗？ play.ionic.io

play.ionic.io/app/2dd13fe979d4

在上面的链接中我删除了“删除 ion-option-button>" part.after that background color is set.so我如何解决这个问题。我也想要那个删除按钮。

这里我加了修改一个--play.ionic.io/app/d3e25c5faa36

你可以更改css代码.item .item-content background-color: transparent !important;

【参考方案1】：

Ionic 在<ion-item> 内注入一个元素，为该元素提供以下结构：

<ion-item>
  <div class="item-content">
  </div>
</ion-item>

Ionic CSS 包含一个 CSS 属性：

.item-content 
  background-color:#ffffff;

您添加的内联 CSS 正在应用于具有 #ffffff 背景的元素后面的元素，因此您看不到背景颜色。

按照@ariestiyansyah 的建议，将背景颜色应用到.item-content 元素，方法是将以下CSS 添加到Ionic CSS 文件中，或者创建自定义CSS 文件并在标题中包含<link>，并使用以下内容：

.item .item-content 
  background-color: transparent !important;

这是working demo。

【讨论】：

你将如何只为一个 ion-item 实例而不是所有实例执行此操作？

【参考方案2】：

我想分享我的解决方案：

我使用 ionic 4 的自定义 CSS 属性，所以如果我想更改背景颜色，我可以创建一个名为“.item-background-color”的新类并更改我想要修改的 CSS 属性的颜色.例如：

my-page.page.scss

.item-background-color
    --ion-item-background:#015f01d5;

然后，我只将我的新类添加到离子项目：

my-page.page.html

<ion-item class="item-background-color">
    My item with new background color
</ion-item>

所做的是更改影响离子项目颜色的变量，因此您可以添加所有您想要的类，无论是否动态，并更改它们各自变量的值。您可以在CSS Custom Properties找到有关变量的信息

希望我的回答对需要修改ionic 4组件的CSS属性的人有所帮助，抱歉我的英文不好，祝你好运！

【讨论】：

这也是 Ionic 5 的最佳答案。

比所选答案更好的解决方案

【参考方案3】：

简单地说，像这样在variables.scss文件中使用颜色（你也可以定义新的颜色）

$colors: (
 primary:    #f9961e,
 secondary:  #882e2e,
 danger:     #f84e4e,
 light:      #f4f4f4,
 dark:       #222,
 newColor:   #000000,
);

在您的 html 文件中：

 <ion-item color='newColor'>
    Test
 </ion-item>

【参考方案4】：

Ionic4 提供颜色属性来赋予背景色

例如

 <ion-item color="light">
 </ion-item>

更多主题属性在这里https://ionicframework.com/docs/theming/basics

参考文档：https://ionicframework.com/docs/api/item

【讨论】：

嗨，你对 ionic 中的深层链接有什么想法吗，我遇到了一个问题，需要一些帮助

我已迁移到 ionic 4，从那时起，深层链接不再为我工作。

【参考方案5】：

实际上让它以不同的方式工作：

.item-complex .item-content  background-color: #262B32 !important; 

正如@gylippus here in post #5所建议的那样

【参考方案6】：

我在 variable.scss 中创建了一个配色方案

.ion-color-newcolor 
  --ion-color-base: #224068;
  --ion-color-contrast: #56b4d3;

使用：

<ion-item color="newcolor">
  <ion-label position="stacked">Name: </ion-label>
  <ion-input required type="text"></ion-input>
</ion-item>

【参考方案7】：

这是最新的解决方案：

ion-item 
  --ion-item-background: #ddd;

【参考方案8】：

一种解决方法是使用<a> 标签而不是<ion-item> 标签，例如：将<ion-item> 更改为<a class="item">，然后使用您想要的任何样式。

来源：http://ionicframework.com/docs/components/#item-icons

【参考方案9】：

有一个更新的解决方案。

<ion-item
    [style.--background]="yourColor"
  >
   //dummy
  </ion-item>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

谢谢，这仍然适用于 Ionic 6。奇怪的是，其他答案都没有对我有用。

【参考方案10】：

在 Ionic3 中，下面的 css 可以解决问题。

.item-ios 
background-color: transparent !important;

【参考方案11】：

<ion-item>
  <div class="item-content">
  </div>
</ion-item>
The Ionic CSS contains a CSS property:
.item .item-content 
background-color: transparent !important;
   

它适用于 <ion-item> 的子 dom。我们可以使用 div class='item-content'，但如果我们不使用所有的 css(.item-content) 属性将适用于 <ion-item> 子元素，就像我们使用

<ion-item>
   Something   //all css will apply into it 
</ion-item>
.item .item-content 
background-color: transparent !important;

我无法发表评论，这就是我在这里写信的原因。

【参考方案12】：

现在您可以这样使用ion-item 的appStyleProperty 属性：

<ion-item
  [appStyleProperty]=" background: someColor "
>
</ion-item>

【参考方案13】：

你应该使用这个方法。它对我有用。（ion-item 需要一个内部元素来保存值）

<ion-item class="inv_adj_menu"><div>View Details</div></ion-item>
<ion-item class="inv_adj_menu"><div>View Lines</div></ion-item>
<ion-item class="inv_adj_menu"><div>Validate Inventory</div></ion-item>