ionic 4 change ion label color when focused within ion item

问题

I want to change ion-label color inside an ion-item with ion-input when focused.

I am able to change the highlight color of ion-item using --highlight-color-focused: yellow; but unable to change the label color.

It is showing default color of label as primary but I want to change it as 'warning' or if required any custom color.

I've tried the following solution which is mentioned in Ionic github repository for same problem but didn't get my problem solved.

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

Following code I have used

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);
    }
}

回答1:

add this in your page.scss

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

回答2:

ion-item

But because of material encapsulation "--color-activated" wont work properly. The easiest way is to target ion-label directly with !important. This is my default ion-item "scss" file.

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

来源：https://stackoverflow.com/questions/60392918/ionic-4-change-ion-label-color-when-focused-within-ion-item