Html 更改 CSS 中 Ionic 离子项的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31772742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing background color of Ionic ion-item in CSS
提问by Rajitha Perera
I have added the following code style="background-color: #C2A5A5 !important. But that has not worked for me. how can I add background color to ion-item?Thanks in advance.
我添加了以下代码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>
回答by Brett DeWoody
Ionic is injecting an element inside the <ion-item>giving the element a structure of:
Ionic 在内部注入一个元素，<ion-item>给元素一个结构：
<ion-item>
<div class="item-content">
</div>
</ion-item>
The Ionic CSS contains a CSS property:
Ionic CSS 包含一个 CSS 属性：
.item-content {
background-color:#ffffff;
}
The inline CSS you added is being applied to the element behind the element with the #ffffffbackground, so you can't see your background color.
您添加的内联 CSS 正在应用于具有#ffffff背景的元素后面的元素，因此您看不到背景颜色。
Apply the background color to the .item-contentelement, as @ariestiyansyah recommended by adding the following CSS to the Ionic CSS file, or create a custom CSS file and include a <link>to it in the header, with the following:
将背景颜色应用到.item-content元素，如@ariestiyansyah 建议的那样，通过将以下 CSS 添加到 Ionic CSS 文件，或创建自定义 CSS 文件并<link>在标题中包含一个，使用以下内容：
.item .item-content {
background-color: transparent !important;
}
Here's the working demo.
这是工作演示。
回答by Ahmed Abuamra
Simply, use colors in variables.scssfile (you can also define new colors) like that
简单地，在variables.scss文件中使用颜色（您也可以定义新颜色），就像这样
$colors: (
primary: #f9961e,
secondary: #882e2e,
danger: #f84e4e,
light: #f4f4f4,
dark: #222,
newColor: #000000,
);
and in your html file:
并在您的 html 文件中：
<ion-item color='newColor'>
Test
</ion-item>
回答by Kailas
Actually got it working in a different way:
实际上让它以不同的方式工作：
.item-complex .item-content { background-color: #262B32 !important; }
as suggested by @gylippus here in post #5
正如@gylippus在帖子 #5 中所建议的那样
回答by Zafer BAHADIR
I created a color scheme in variable.scss
我在 variable.scss 中创建了一个配色方案
.ion-color-newcolor {
--ion-color-base: #224068;
--ion-color-contrast: #56b4d3;
}
Using:
使用：
<ion-item color="newcolor">
<ion-label position="stacked">Name: </ion-label>
<ion-input required type="text"></ion-input>
</ion-item>
回答by Ashish
Ionic4 provides color property to give background-color
Ionic4 提供了 color 属性来赋予背景色
e.g.
例如
<ion-item color="light">
</ion-item>
More theming property available here https://ionicframework.com/docs/theming/basics
Reference doc : https://ionicframework.com/docs/api/item
回答by Shoter Developer
I want to share my solution:
我想分享我的解决方案：
I use the custom CSS properties of ionic 4, so if I want to change the background color I can create a new class called ".item-background-color" and change the color of the CSS property that I want to modify. For example:
我使用 ionic 4 的自定义 CSS 属性，因此如果我想更改背景颜色，我可以创建一个名为“.item-background-color”的新类并更改我要修改的 CSS 属性的颜色。例如：
my-page.page.scss
我的页面.page.scss
.item-background-color{
--ion-item-background:#015f01d5;
}
then, I only add my new class to the ionic item:
然后，我只将我的新类添加到离子项中：
my-page.page.html
我的页面.page.html
<ion-item class="item-background-color">
My item with new background color
</ion-item>
What is done is to change the variable that affects the color of the ionic item, so you can add all the classes you want, dynamically or not, and change the values of their respective variables. You can find information about the variables at CSS Custom Properties
所做的就是改变影响离子项颜色的变量，这样你就可以动态或不动态地添加所有你想要的类，并改变它们各自变量的值。您可以在CSS 自定义属性中找到有关变量的信息
I hope my answer is helpful to people who need to modify the CSS properties of ionic 4 components, sorry for my bad english and good luck!
希望我的回答对需要修改ionic 4组件CSS属性的人有所帮助，抱歉我的英文不好，祝你好运！
回答by Nghia Tran
A workaround is using <a>tag instead of <ion-item>tag, for example: change <ion-item>to <a class="item">and then style it with whatever you want.
一种解决方法是使用<a>标签而不是<ion-item>标签，例如：更改<ion-item>为<a class="item">，然后使用您想要的任何样式。
Source: http://ionicframework.com/docs/components/#item-icons
回答by Keerthesh
In Ionic3, below css will do the trick.
在 Ionic3 中，下面的 css 可以解决问题。
.item-ios {
background-color: transparent !important;
}
回答by AmitNayek
<ion-item>
<div class="item-content">
</div>
</ion-item>
The Ionic CSS contains a CSS property:
.item .item-content {
background-color: transparent !important;
}
its apply on child dom of <ion-item>. We can use can use div class='item-content', but if we won't all the css(.item-content)property would apply to the <ion-item>child elements like if we use
它适用于<ion-item>. 我们可以使用 can use 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;
}
I'm not able to comment that's why I am writing over here.
我无法发表评论，这就是我在这里写信的原因。
