Question

我使用离子，我需要在我的项目中更改一些样式。特别是我需要将边框颜色更改为红色，将背景更改为分隔项目列表

＆＃34;看图像以了解我需要什么＆＃34;

这是模板页面的代码

<ion-view title="Home">
<ion-content  scroll="true" class="padding has-header">
    <form class="list">
        <label class="item item-select" name="choose your category">
            <span class="input-label">choose your category</span>
            <select></select>
        </label>
    </form>
    <ion-list>
        <ion-item class="item-divider">Unreturned stuff</ion-item>
        <ion-item class="item-thumbnail-left">
            <img>
            <h2>Title</h2>
            <p>Item</p>
        </ion-item>
        <ion-item class="item-divider">Limited stuff</ion-item>
        <ion-item class="item-thumbnail-left">
            <img>
            <h2>Title</h2>
            <p>Item</p>
        </ion-item>
        <ion-item class="item-divider">Skills</ion-item>
        <ion-item class="item-thumbnail-left">
            <img>
            <h2>Title</h2>
            <p>Item</p>
        </ion-item>
    </ion-list>
</ion-content>

Answer 1

您可以通过覆盖以下类来更改列表边框的颜色：

.item, .item-divider {
  border-color: red;
}

但是请注意，这将改变项目和分隔线的边界，并且不会完全达到您所描述的内容。如果您希望某些边框保持灰色，则需要使用border-bottom，border-left，border-right和border-top分别设置边框的各个部分的样式。

要使用默认颜色Ionic更改分隔线的背景，您需要添加以下内容：

<ion-item class="item-divider positive-bg light">Unreturned stuff</ion-item>

这会向分隔符添加带有白色（浅色）文本的蓝色（正片）背景，但我建议创建一个自定义CSS类，设置background-color和color，如下所示：< / p>

.custom-class-divider {
    color: [something];
    background-color: [something else]
}

Answer 2

您可以在

的帮助下进行更改

ion-item{
   --border-color: rgb(48, 66, 94);
}

Answer 3

--border-color应该根据文档工作，但是即使添加了!important也不会做任何更改

更改离子中的边框颜色和分隔项颜色

3 个答案: