CODEWITHSUNDEEP
ionic4
John
John

Reputation: 139

Component variable in variables.scss doesn’t work

I wrote the code below in the file of “variables.scss” or “global.scss”:

ion-searchbar {
–placeholder-color: white;
–placeholder-opacity:1;
–icon-color:white;
}

it should make the text of placeholder with white color, however, it doesn’t work.

But, if I write the code just in the page css file, it does work.

Does somebody know why?

Upvotes: 0

Views: 94

Answers (1)

NickyTheWrench
NickyTheWrench

Reputation: 3230

You have to put it within the :root pseudo selector, like this:

:root {

  ion-searchbar {
    --placeholder-color: white;
    –-placeholder-opacity: 1;
    –-icon-color: white;
  }

}

This will ensure that any variables you set inside of :root will apply across your entire application.

Upvotes: 1

Related Questions