css - ionic 5 component selector is not applied to html element

Question

asked Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

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 it is not applied. 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 prevent the styles from being applied in the page?

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-06T18:55:49+0000

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

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

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