angular7 – Modifies the styles of a component in Ionic 5 and Angular 7


I read about it. If I understand Angular well, I add a feature to encapsulate the styles of a component. I do not really understand how it works. But I understood that to refer to the styles of the component, there were two ways:

Yesterday I asked this question but it was too late to have no answer.

:host{
  ion-content {
    background: red;
  }
}

// O esta otra forma

page-name{
    ion-content{
       background: red;
    }
}

My problem is that it does not work directly for me. I must always do the following.

:host{
  ion-content {
    --background: red;
  }
}

This way if the styles are taken. But they become recurring. So, if I rewrite the styles of an ionic component, this applies to all children of this component.

enter the description of the image here

That's the code I have. I hope you can help me.

HTML


  
    
    
      Reading the barcode
      welcome to the your new app
    
    
email
{{ error.message }}
password
{{ error.message }}

Login

SCSS

:host {
    ion-content {
        --background: url("./../../../../assets/App/7243-01-low-poly-background-16x9-1.jpg") !important;
        --ion-background-color: #006ff8 !important;
        background-position: center, center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
}