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

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元素,如@ariestiyansyah建议通过将以下CSS添加到Ionic CSS文件,或创建自定义CSS文件并<link>在标题中包含一个,具有以下内容:

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

这是工作演示.

Answer 2

我想分享我的解决方案：

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

我的页面.page.scss

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

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

我的页面.page.html

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

所做的就是改变影响离子项颜色的变量，这样你就可以动态或不动态地添加所有你想要的类，并改变它们各自变量的值。您可以在CSS 自定义属性中找到有关变量的信息

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

Answer 3

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

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

并在您的html文件中：

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

Answer 4

这是最新的解决方案：

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

Answer 5

Ionic4 提供 color 属性来给出背景颜色

例如

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

更多主题属性可在此处https://ionicframework.com/docs/theming/basics

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