Having issue in setting color for ion-label in ionic 4

user_2039326 0
Viewed 1244

I was trying to color ion-label (floating element) in ionic 4 but needed to use !important in the property

<ion-row class="ion-margin-vertical ion-padding-horizontal">
  <ion-col size="12" class="ion-margin-bottom">
    <ion-item>
      <ion-label position="floating">Contact Number</ion-label>
      <ion-input type="number" value="333"></ion-input>
    </ion-item>
  </ion-col>
<ion-row>

I tried using custom style in global.scss

ion-label {
  --color: var(--ion-color-step-400) !important;
}

unable to do the same without important but was not working, but when I used !important it works. Is it the correct approach? Need help.

ionic4 ionic-framework angular
2 Answers

use color="secondary" in ion-label like below

using !important its also correct way, its override the default color or properties

<ion-row class="ion-margin-vertical ion-padding-horizontal">
  <ion-col size="12" class="ion-margin-bottom">
    <ion-item>
      <ion-label color="secondary" position="floating">Contact Number</ion-label>
      <ion-input type="number" value="333"></ion-input>
    </ion-item>
  </ion-col>
<ion-row>
user_93729230

Its getting refereed from variables.scss file, which have full sets of :root css elements like primary, secondary, tertiary, success, warning, danger, dark, medium, light with their color codes as below.

So you can directly use these names to apply color which internally apply below properties, you can add further styling as per you needs.

  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

you should be able to use above mentioned default color properties without any additional ! important flag.

but if you want to apply any further additional override style, one needs to use important as per css standard as below.

The !important property in CSS is used to provide more weight (importance) than normal property [in this case default ionic class]. In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule

user_121939880
Related