Change the color of the IonItem in focus

Ionic Framework Ionic React
1

How do I change the colors of an IonItem (containing IonLabel and IonInput) when it is in focus?

According to the docs it seems like it should be highlight-color-focused but I can’t get the color to change.

MyComponent.tsx

    <IonItem>
      <IonLabel position="stacked">
        { title }
      </IonLabel>
         <IonInput
            value={value}
            onIonBlur={onBlur}
            onIonChange={
              (e: CustomEvent) => {
                // Set the value in react-hook-form.
                onChange(e?.detail.value);
              }
            }
        />
    </IonItem>

variables.css

:root {
  --ion-item-color-focused: var(--ion-color-secondary) !important;
  --ion-item-highlight-color-focused: var(--ion-color-secondary) !important;
  --ion-label-color-focused: var(--ion-color-secondary) !important;
  --ion-label-highlight-color-focused: var(--ion-color-secondary) !important;
  --ion-input-color-focused: var(--ion-color-secondary) !important;
  --ion-input-highlight-color-focused: var(--ion-color-secondary) !important;
}
2

I was able to change the color of the IonItem selected in a modal like this:

.item-has-focus {
  --highlight-background: var(--ion-color-secondary);
  ion-label {
    color: var(--ion-color-secondary) !important;
  }
}

But this seems like a hack; there must be a better way…