How to style components in Ionic v4?

Ionic Framework
1

I’m not certain this is the proper category, but here goes.

I’ve got a rather large Ionic v3 project I’m trying to migrate to Ionic v4, and I hate to say this, but man is Ionic v4 a lot harder to figure out than Ionic v3.

I had little to no trouble learning v3, but v4 I’m constantly banging my head against the wall.

Complaining aside; how do I style components in Ionic v4?

I’ve generated a component like so: ionic g component components/timer

I’ve changed the selector to just be ‘timer’ and in my timer.component.scss I’ve added this style:
timer { background: blue; }

Yet it doesn’t take, why is that? When I inspect the DOM I can tell the component is being rendered as a <timer></timer> so the selector should be fine, yet the inspector shows no sign of the style.

Furthermore the <timer></timer> isn’t inside the #shadow-root, so it’s not shadow DOM that’s preventing this from working. If I move the style to my page.scss file it works fine.

Any help is welcome, so thanks in advance :slight_smile:

2

Ok I figured it out now, I need to use :host instead of timer inside the scss file. I figured this out purely by trial-and-error though.

This could really use a section in your “Getting started” documentation for Ionic v4 (alongside HOW to create components in the first place, as simply ionic g component foo doesn’t work either)