1
votes

Comment donner une couleur de fond à un corps angulaire à 8 composants?

Comment puis-je changer la couleur d'arrière-plan du corps de ce composant? J'utilise angular 8.

html, body {
min-height: 100%;
background: green;
}


.home-container {
color: var(--col-pale);
 min-height: 100%;
 height: 100%;
 font-family: "roboto-reg";
 overflow-y: hidden;
 background-color: red;
}

.home-login-shape-bg {
 background-image: 
 url("../../assets/images/ui/shape_login_dt_1024x682.png");
 background-repeat: no-repeat;
 background-size: contain;
 background-position: center;
 height: 682px;

<div class="container-fluid home-container">
<div class="row">
<div class="col">
  <div class="home-login-shape-container">
    <div class="home-login-shape-bg mx-auto">
      <div class="home-login-container d-flex flex-column justify-content- 
           center align-items-center">
      </div>
    </div>
  </div>
</div>
 </div>
</div>

}

Je n'arrive pas à faire changer la couleur d'arrière-plan. Je peux le changer pour l'élément racine mais je souhaite spécifiquement changer la couleur d'un seul composant

Toute aide très appréciée.

angular html css

1 commentaires

essayez de déclarer votre css dans le fichier component.scss. Il semble que vous déclariez dans le styles.scss où vous définissez des styles globaux. Généralement angulaire fournit l'encapsulation de la vue.

3 Réponses :

0
votes

Il existe une propriété CSS angulaire appelée hôte . Donc, dans le fichier CSS / Scss de votre composant, vous pouvez faire ci-dessous: -

:host {
      display: block;
      background-color: red;
}

Le code ci-dessous n'est donc applicable qu'au composant qui est votre élément hôte.

2 commentaires

: l'hôte cible le conteneur d'accueil

: l'hôte ciblera votre composant réel. Par exemple, . Mais je crois que "background-color" sur la classe "home-container" remplace vos styles d'hôte. Pouvez-vous essayer de supprimer le style à ce sujet?

1
votes

Cela a résolu le problème pour moi

:host {
 display: block;
 background-color: green;
}


.home-container {
color: var(--col-pale);
height: 100vh;
font-family: "roboto-reg";
overflow-y: hidden;
}

@saget Merci pour votre aide!

1 commentaires

Vous n'avez besoin d'aucun conteneur de niveau supérieur dans les composants angulaires en raison de : host . Vous pouvez également consulter host-context (utile pour les styles conditionnels en fonction du parent avec lequel le composant est enveloppé)

0
votes

déplacez tout le contenu du composant dans la division principale et vous pouvez changer de style selon vos besoins

.main-div { background-color: #09c;}

<div class="main-div">
<div class="container-fluid home-container">
<div class="row">
<div class="col">
  <div class="home-login-shape-container">
    <div class="home-login-shape-bg mx-auto">
      <div class="home-login-container d-flex flex-column justify-content- 
       center align-items-center">
      </div>
    </div>
  </div>
</div>

0 commentaires