web-dev-qa-db-fra.com

Appliquer les styles du parent

Supposons que j'ai un composant avec ce modèle:

<div class="frame">
  <span class="user-defined-text">{{text}}</span>
</div>
<style>
  span { font-size: 3em; }
  .frame { ... }
</style>

Comment puis-je fusionner les styles appliqués au composant, par exemple.

<custom-component [text]="'Some text'">
<style>custom-component { font-weight: bold; }</style>

de sorte que la sortie finale "Some text" soit à la fois en gras et 3em?

Mieux encore, existe-t-il un moyen d’obtenir les styles calculés pour l’élément hôte, pour pouvoir, par exemple, appliquer le background-color de l’hôte au border-color d’un élément de mon modèle?

cssangularangular2-directives
12
Soumya
  • définissez encapsulation: ViewEncapsulation.None pour autoriser l’application de styles extérieurs. 
import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'custom-component',
  encapsulation: ViewEncapsulation.None
})
export class Custom {
  • utilisez styleUrl pour ajouter un fichier CSS en combinaison avec le sélecteur d'hôte
:Host(.someClass) {
      background-color: blue;
}

<custom-component class="someClass"></custom-component>

appliquer des styles en fonction de la classe ajoutée à l'élément. 

20
Günter Zöchbauer

Je sais que c'est vieux, mais je pense que cela devrait être plus visible. Vous pouvez utiliser le sélecteur /deep/ pour forcer un style dans l'arborescence des composants enfants dans toutes les vues de composants enfants. Le sélecteur /deep/ fonctionne à n’importe quelle profondeur de composants imbriqués, et il s’applique à la fois aux enfants de vue et aux enfants de contenu du composant.

Je pense que c'est beaucoup plus propre et facile à mettre en œuvre.

parent.css

/deep/ .class {
    background-color: red;
}

https://angular.io/docs/ts/latest/guide/component-styles.html

17
Mike

En ce qui concerne CSS, les composants prennent en charge le DOM fantôme. Cela signifie que leurs styles sont isolés. Le mode par défaut est isolé. Vous devez donc définir des styles CSS dans le composant (propriété de styles).

Vous pouvez également changer le mode d'encapsulation en ViewEncapsulation.None. De cette façon, votre composant pourra voir les styles du composant parent:

@Component({
  selector: 'child',
  encapsulation: ViewEncapsulation.None,
  (...)
})
export class MyComponent {
  (...)
}

J'espère que ça vous aide, Thierry

0
Thierry Templier

Utilisez le sélecteur de pseudo-classe : Host pour attribuer un style au <custom-component>. 

Nous ne pouvons pas écrire de style CSS dans un élément personnalisé en utilisant class.

Exemple

<custom-component class="custom-comp" [text]="'Some text'">

.custom-comp {
  font-weight: bold;
  color: green;
}

Pour ce faire, nous pouvons utiliser: Le sélecteur d’hôte pour styler le comme indiqué ci-dessous

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.html',
  styleUrls: ['./custom-component.scss']
})

Dans custom-composant.scss

:Host {
  font-weight: bold;
  color: green;
}

Vous pouvez en savoir plus sur le style du : Hôte element dans la documentation officielle d'Angular4

0
RAJA