J'utilise Stencil JS pour écrire des composants pour un micro frontal que je construis. J'ai un <dashboard-container> qui, comme son nom l'indique, contient tous les autres composants que j'ai.

J'essaie de changer la couleur d'arrière-plan du corps de mon index.html et de laisser chaque autre élément, composant garder son propre style.

Le problème est que si j'essaie d'appliquer background-color: red à mon <dashboard-container>, le reste des enfants hérite également de la couleur d'arrière-plan.

Je m'attends à ce que si j'applique une couleur d'arrière-plan à un élément parent, les enfants conservent leurs propres styles, mais cela ne fonctionne pas de cette façon.

Comment puis-je styliser un composant sans que les enfants en héritent?

Voici comment je l'ai configuré:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'lh-dashboards-container',
  styleUrl: 'lh-dashboards-container.scss',
  scoped:true

})
export class LhDashboardsContainer {
  render() {
    return (
      <div class="lh-dashboards-container">
        <lh-dashboards-navigation></lh-dashboards-navigation>
        <lh-dashboards-cohort-finder></lh-dashboards-cohort-finder>
      </div>
    );
  }
}

Donc, si je fais ce qui suit:

//lh-dashboards-container.scss
.lh-dashboards-container {
    background-color:red;
}

Chaque composant enfant et son élément auront leur arrière-plan changé en rouge.

1
10110 26 févr. 2021 à 01:40

1 réponse

Meilleure réponse

Vous pouvez ajouter all: initial; sur les éléments enfants mais cela spécifiera que toutes les propriétés de l'élément doivent être modifiées à leurs valeurs initiales.

Il est préférable de styliser les enfants, de remplacer ceux hérités du parent, si nécessaire.

Pour en savoir plus, all cliquez ici.

1
kkakroo 2 mars 2021 à 12:24