Custom selector component css not working outside global.css

Ionic Framework
1

Ionic 4, I’ve got a few custom components, I can’t get the styles to work on the selector if I add them to the component scss file

on “phone-input.component.scss” does not work:

phone-input{
  background: red;
}

if I add to “global.scss” it does work

phone-input{
  background: red;
}
2

answering this in case anyone runs into this.

to apply style to the selector tag you can use:

“:host {}” instead of “tag-name {}”

3

what do you mean with “host”?

4

this:

1 Like
5

Cool thanks, never used it before.

So with Ionic 3:
my-component {}

Ionic +4:
:host {}

2 Likes