Nativescript placeholder-color style on TextField doesn't work

Question

How can I set the placeholder-color on a TextField in Nativescript (6.1.2) with Angular and nativescript-theme-core (2.0.24)?

I've tried setting _app-common.scss

TextField {
  placeholder-color: red;
}

but that doesn't work.

This playground with angular works however: https://play.nativescript.org/?template=play-ng&id=x9Gf79&v=2 but it has another file structure than my project.

It also works if I do this instead:

.input {
  placeholder-color: red;
}

I also found some variables that I tried to override that didn't work either: _app-variables.scss

$text-field-hint-color: red !default;
$placeholder-color: red !default;

Why doesen't it work when I try to style the TextField? And what is the correct way to do this?

Answer 1

@jarrodwhitley have reason is working implementing like this:

<TextField style="placeholder-color:white" [(ngModel)]="userName" hint="User Name..." color="white">

Answer 2

It isn't super clear, but looking at the documentation it appears that placeholder-color is a "Root View CSS Class". Meaning, you wouldn't set it directly on the text field itself, but on the top-level view which contains it.

https://docs.nativescript.org/ui/styling#user-interface-styling

I would have totally expected that it would need to be set on the element that I was trying to style. I suspect that this means that all text fields within a given view have to have the same styling.

Hope this helps!