ionic 5 component selector is not applied to html element

Ionic Framework Ionic Angular
1

I have an ionic 5 app for which I built each page using the cmd line, so they were created using the correct structure.

However, when I try to run it, the page styles aren’t used, even though the browser shows the css file has been loaded.

I have the following in the .ts page:

@Component({
  selector: 'app-onboard',
  templateUrl: './onboard.page.html',
  styleUrls: ['./onboard.page.scss'],
})

The html file:

<body>
  <app-onboard>
    ...lots of other elements
    <div class="style1">
    </div>
  </app-onboard>
</body>

The scss file:

app-onboard {
  .style1 {
    color: #ff00ff;
  }
}

style1 is on an html element, but Firefox shows that it is not being applied to the element. However, when I delete the app-onboard wrapper, the style is applied i.e.:

.style1 {
  color: #ff00ff;
}

Why would the presence of the app-onboard selector in the scss file prevent the styles defined within it from being applied in the page?

2

Because a fish cannot see the water in which it swims.

3

There should be a . in front of the app-onboard in the scss file as you’re calling the scss class instead of the html tag like so

.app-onboard {
.style1 {
color: #ff00ff;
}
}

Hence the reason why the style only applied once you removed it.

If you wish to use the selector as per your current scss you’ll have to change your html file to

...lots of other elements
____________________

I’m assuming the html file is outside of the app-onboard component and you’re calling the component from it.

4

you should need the exact selector which is first created e.g if you changed the selector name in ts file then rollback it.

5

@YogitaKashyap21 <app-onboard> is actually an html element rather than a class, which is why the css doesn’t use a dot.