Question

我添加了以下代码style="background-color: #C2A5A5 !important。但这对我没有用。如何为离子项添加背景颜色？提前感谢。

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

Answer 1

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

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

Ionic CSS包含一个CSS属性：

.item-content {
  background-color:#ffffff;
}

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

将背景颜色应用于.item-content元素，通过将以下CSS添加到Ionic CSS文件中建议使用@ariestiyansyah，或创建自定义CSS文件并在标题中包含<link> ，具有以下内容：

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

这是working demo。

Answer 2

我想分享我的解决方案：

我使用离子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属性的人有所帮助，对不起我的英语不好，祝你好运！

Answer 3

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

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

正如@gylippus here in post #5

所建议的那样

Answer 4

Ionic4提供颜色属性以提供背景颜色

例如

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

此处https://ionicframework.com/docs/theming/basics
有更多主题资源
参考文档：https://ionicframework.com/docs/api/item

Answer 5

解决方法是使用<a>标记而不是<ion-item>标记，例如：将<ion-item>更改为<a class="item">，然后根据需要设置样式。

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

Answer 6

只需在variables.scss文件中使用颜色（您也可以定义新颜色）

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

并在您的html文件中：

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

Answer 7

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

Answer 8

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

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

Answer 9

现在，您可以通过以下方式使用appStyleProperty的{{1}}属性：

ion-item

Answer 10

你应该使用这个方法。它对我有用。（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>

Answer 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>的子域。我们可以使用可以使用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;
}

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

改变CSS中离子离子项的背景颜色

11 个答案: