如何更改 ionic 7 中离子输入标签的颜色

Question

我已将项目升级到 Ionic 7，现在离子输入不需要离子标签。我已经更改了它，但我不知道如何分配它们的颜色。

之前：

之后：

我在文档中找不到任何相关内容。有人能帮我吗？？ 😢

Answer 1

进行了一些尝试和错误，但这就是我发现更改 ionic7 中离子输入的标签部分的方法：

CSS：

::ng-deep ion-input .label-text{
    color: orange;
}

Answer 2

    <ion-item>
        <ion-input labelPlacement="stacked" value="[email protected]">
          <div slot="label"> <ion-text color="danger"> Email (Required)</ion-text></div>
        </ion-input>
   </ion-item>

Answer 3

另外两个没有已弃用的

::ng-deep

选择器的选项：

a）使用类名并添加带有颜色的全局样式表：

ion-input.red label .label-text {
  color: 'red';
}

<ion-item>
  <ion-input labelPlacement="fixed" class="red"></ion-input>
</ion-item>

b) 使用 --color 变量

Ionic 文档中也提到了此选项。

您可以将组件样式表内的

--color

 变量设置为所需的颜色。

// my-component.styles.css

:host ion-input {
  // change the text for all ion-input elements inside this component to red.
  --color: red
}

或者将其包装在一个附加类中，以防您想要有多个选项：

// my-component.styles.css

:host ion-input.red {
  // change the text for ion-input elements with classname red inside this component to red.
  --color: red
}

<ion-input labelPlacement="fixed" class="red"></ion-input>