web-dev-qa-db-fra.com

Remplacement du CSS encapsulé du composant externe

Je me demandais comment remplacer le CSS encapsulé d'un composant externe.

J'utilise donc matériau2 dans mon projet et le composant des onglets a un débordement d'attribut défini sur tab-body. Est-il possible de remplacer la valeur de dépassement?

cssangularangular-material
7
Salma Hamed

Vous pouvez utiliser l'instruction css /deep/ spéciale. Voir la documentation

Donc, si vous avez

app
  sub-component
    target-component
      <div class="target-class">...</div>

Vous pouvez mettre dans vos applications css (ou moins):

/deep/ .target-class {
  width: 20px;
  background: #ff0000;
}

De toute évidence, vous pouvez également mettre ce fragment css dans sub-component.

18
Meir

Il suffit de vérifier la classe qui est appliquée aux onglets par le composant externe (utilisez Inspector ou tout autre outil). Dans votre fichier css de style, ajoutez le même nom de classe pour les onglets et définissez la propriété de débordement en y ajoutant! Important pour vous assurer qu'elle écrase le précédent. Assurez-vous également que votre lien css vers la page est ajouté après le lien css du composant externe, le cas échéant.

J'espère que cela t'aides.

1
Nasir T

De cet article

Bien que le style d'un composant soit bien isolé, il peut encore être facilement remplacé si nécessaire. Pour cela, il suffit d’ajouter un attribut au corps de la page:

<body override>
    <app></app>
</body>

Le nom de l'attribut peut être n'importe quoi. Aucune valeur n'est nécessaire et le remplacement de nom indique clairement à quoi il sert. Pour remplacer les styles de composant, nous pouvons ensuite:

[override] hello-world h1 {
    color:red;
}

Où override est l'attribut, hello-world est le composant cible et h1 est ce que vous essayez de changer de style. (obtenez ceci juste ou cela ne fonctionnera pas).

Votre composant hello-world serait 

selector: 'hello-world',
styles: [`
   h1 {
      color: blue;
   }
`],
template: ` <h1>Hello world</h1> `

Je pense que c'est la manière la plus élégante.

Si vous construisez une bibliothèque, vous pouvez également réinitialiser le style en faisant quelque chose d'extraordinaire dans votre css, comme:

:Host-context(.custom-styles) { //.. css here will only apply when there is a css class custom-styles in any parent elem }

Alors, pour utiliser votre composant, vous utiliseriez 

<hello-world class="custom-styles">

Mais c'est beaucoup moins pratique que la première option.

0
Ced