离子 4 在离子项目内聚焦时改变离子标签颜色

Question

我想在聚焦时更改 ion-item 和 ion-input 内的 ion-label 颜色。

我可以使用 --highlight-color-focused: yellow; 更改 ion-item 的突出显示颜色，但无法更改 label 颜色。

它显示标签的默认颜色为主，但我想将其更改为 'warning' 或者如果需要任何自定义颜色。

我已经尝试了 Ionic github 存储库中针对相同问题提到的以下解决方案，但没有解决我的问题。

https://github.com/ionic-team/ionic/issues/18531

下面是我用过的代码

login.page.html

<ion-content>
  <div class="logo">
    <div class="logoCenter">
      <ion-icon name="sync"></ion-icon>
    </div>
    <h1 style="font-family: ProximaBold; color: white">Sample Application</h1>
  </div>

  <ion-grid style="margin-top: 10vh;">
    <ion-row>
      <ion-col size="12">
        <ion-item>
          <ion-label class="loginLabel" position="floating">Mobile No.</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label class="loginLabel" position="floating">Password</ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-grid class="ion-padding">
    <ion-row>
      <ion-col class="ion-text-center" size="12">
        <ion-button expand="full" shape="round" [routerLink]="['/home']">Submit</ion-button>
        <p style="color: white;">Forgot Password?</p>
      </ion-col>
    </ion-row>
  </ion-grid>
  <p class="registerText">New Here? SIGN UP!</p>
</ion-content>

login.page.scss

ion-content {
    --background: linear-gradient(180deg, #2ecc71, #289c59, #1a743f);

    .logo {
        margin-top: 20%;
        text-align: center;
    }

    .logoCenter {
        margin: 0 auto;
        height: 150px;
        width: 150px;
        border-radius: 50%;
        background: linear-gradient(290deg, #31da79, #29b866);
        box-shadow:  20px 20px 60px #27ad60, -20px -20px 60px #35eb82;
        display: flex;
        justify-content: center;
        align-items: center;

        ion-icon {
            zoom: 4;
            color: white;
            animation: rotating 2s linear infinite;
        }
    }

    ion-item {
        --background: transparent;
        --border-color: white;
        --color: white;
        --highlight-color-focused: yellow;
    }

    ion-button {
        --background: white;
        --color: green;
    }

    .registerText {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        color: white;
        font-size: larger;
    }
}

@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

Answer 1

将此添加到您的 page.scss

ion-item.item-has-focus > ion-label{
  color: red !important;
}

Answer 2

ion-item

但由于 material 封装“--color-activated”无法正常工作。最简单的方法是直接使用 !important 定位 ion-label。这是我的默认 ion-item "scss" 文件。

.ion-item{
    --ripple-color: transparent;
    &.item-has-focus ion-label {
        color: gray !important;
    }
    ion-input {
        --padding-bottom: 0 !important;
        --padding-top: 0 !important;
    }
}

Answer 3

只需将 !important 添加到您的颜色中，它就会始终关注您添加的颜色

ion-label {
    color: #fff !important;
}

离子 4 在离子项目内聚焦时改变离子标签颜色

ionic 4 change ion label color when focused within ion item

sass

ionic-framework

ionic4