html - 改变离子输入颜色

Question

我的应用程序中有一个ion-input组件，我正在尝试为暗模式设置颜色，但我不知道如何更改整个组件的颜色。我尝试设置ion-input颜色，但它没有为整个字段着色，这就是它的外观：

这是我的html：

<div class="goal-title-input ion-padding">
    <div class="icon-title">
        <ion-icon name="trophy-outline"></ion-icon>
        <ion-label class="app-small-title">What's your goal?</ion-label>
    </div>
    <ion-item lines="none">
        <ion-input placeholder="This is placeholder text" (ionChange)="onChangedTitle($event)"></ion-input>
        <ion-icon name="trophy-outline" slot="start"></ion-icon>
    </ion-item>
</div>

这是我的 css 文件：

.goal-title-input {
    ion-item {
        border-radius: 10px;
        box-shadow: 0px 13px 30px 0px rgba($color: #000000, $alpha: 0.09);
        padding: 8px;
        margin-bottom: 16px;

        ion-icon {
            font-size: 21px;
            margin-right: 16px;
            color: var(--ion-color-medium);
        }

        ion-input {
            padding-left: 10px !important;
            border-left: 1px solid #f4f4f4;
            background-color: var(--ion-color-danger);
        }
    }
}

我想这是因为填充，但我不知道如何为该字段的其余部分着色。

标签： htmlcssionic-framework

Answer 1

<div class="item-native">在 Shadow DOM中有一个元素<ion-item>，如果你给这个容器同样的红色/粉色背景，它将覆盖整个输入。您可以使用CSS Shadow Parts为阴影树内的元素设置 CSS 属性样式。如果您使用inside of定位嵌套<div class="item-native" part="native">容器。可以应用以下样式：::part<ion-item>

ion-item::part(native) {
  background-color: var(--ion-color-danger);
}

<ion-input>由于padding: 8pxon周围仍然存在一些空白<ion-item>。如果删除该填充，整个容器的背景将是var(--ion-color-danger). 看看StackBlitz 演示。