How to use global or shared styles between components in ionic 4?

Question

In ionic 3 we use app.scss file to write global styles. Ionic 4 is not providing a scss variable to override ion-inputs background as well as many other css properties.

I need to apply a white background to all the ion-inputs. For now, I was able to do it by replicating the following scss code on each component:

:host { 
  ion-input {
    --background: white;
  }
}

But I would like to write this code in only one place. What is the scss file to do it? Do I have to import that file in some place?

Answer 1

You just need to put your css in variable.scss like this

ion-input {
  background-color: white;
}

then whenever you are using ion-input it takes background color white.