J'ai un projet Angular avec ng5-slider. Je suis l'article suivant:
https: // github .com / angular-slider / ng5-slider / blob / master / STYLING.md
J'essaye de changer la taille de la police:
scss:
<ng5-slider _ngcontent-c0="" class="ng5-slider" _nghost-c1="" ng-reflect-value="50"
ng-reflect-options="[object Object]"><span _ngcontent-c1=""
class="ng5-slider-span ng5-slider-bar-wrapper ng5-slider-left-out-selection" ng5sliderleftoutselelem=""
style="visibility: hidden;"><span _ngcontent-c1="" class="ng5-slider-span ng5-slider-bar"></span></span><span
_ngcontent-c1="" class="ng5-slider-span ng5-slider-bar-wrapper ng5-slider-right-out-selection"
ng5sliderrightoutselelem="" style="visibility: hidden;"><span _ngcontent-c1=""
class="ng5-slider-span ng5-slider-bar"></span></span><span _ngcontent-c1=""
class="ng5-slider-span ng5-slider-bar-wrapper" ng5sliderfullbarelem=""><span _ngcontent-c1=""
class="ng5-slider-span ng5-slider-bar"></span></span><span _ngcontent-c1=""
class="ng5-slider-span ng5-slider-bar-wrapper" ng5sliderselbarelem=""
style="visibility: hidden; width: 80px; left: 0px;"><span _ngcontent-c1=""
class="ng5-slider-span ng5-slider-bar ng5-slider-selection"
ng-reflect-ng-style="[object Object]"></span></span><span _ngcontent-c1=""
class="ng5-slider-span ng5-slider-pointer ng5-slider-pointer-min" ng5sliderminhelem=""
ng-reflect-ng-style="[object Object]" aria-valuenow="50" aria-valuetext="Male(50%), Female(50%)"
aria-valuemin="0" aria-valuemax="100" role="slider" tabindex="0" style="left: 64px;"></span><span
_ngcontent-c1="" class="ng5-slider-span ng5-slider-pointer ng5-slider-pointer-max" ng5slidermaxhelem=""
ng-reflect-ng-style="[object Object]" style="display: none;"></span><span _ngcontent-c1=""
class="ng5-slider-span ng5-slider-bubble ng5-slider-limit ng5-slider-floor" ng5sliderflrlabelem=""
style="visibility: hidden; left: 0px;">Male(0%), Female(100%)</span><span _ngcontent-c1=""
class="ng5-slider-span ng5-slider-bubble ng5-slider-limit ng5-slider-ceil" ng5sliderceillabelem=""
style="visibility: hidden; left: -19px;">Male(100%), Female(0%)</span><span _ngcontent-c1=""
class="ng5-slider-span ng5-slider-bubble ng5-slider-model-value" ng5sliderminlabelem=""
style="visibility: visible; left: -19px;">Male(50%), Female(50%)</span><span _ngcontent-c1=""
class="ng5-slider-span ng5-slider-bubble ng5-slider-model-high" ng5slidermaxlabelem=""
style="visibility: hidden;"></span><span _ngcontent-c1=""
class="ng5-slider-span ng5-slider-bubble ng5-slider-combined" ng5slidercmblabelem=""
style="visibility: hidden;"></span><span _ngcontent-c1="" class="ng5-slider-ticks" ng5slidertickselem=""
hidden="">
html:
<div class="custom-slider">
<ng5-slider [(value)]="value" [options]="options"></ng5-slider>
</div>
Peu importe ce que j'ajoute de styles, il n'est pas appliqué. Je peux voir dans Chrome ce qui suit est généré:
.custom-slider {
.ng5-slider {
.ng5-slider-selection {
background: rgb(255, 255, 0) !important;
}
.ng5-slider-span {
background-color: red !important;
font-size: 6px;
}
.ng5-slider-pointer{
background-color: red !important;
font-size: 6px;
}
}
}
.ng5-slider .ng5-slider-pointer{
height: 16px !important;
background-color: red !important;
}
.ng5-slider-span{
background-color: red !important;
}
Des idées si c'est le contrôle, angulaire ou la partie de style?
3 Réponses :
ajoutez les styles à votre styles.css du dossier src
ou ajoutez:
encapsulation: ViewEncapsulation.Aucun: p >
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.scss' ],
encapsulation: ViewEncapsulation.None
})
à votre composant pour appliquer des styles dans scss de votre composant.
DEMO .
Ma question était si floue que je ne m'attendais pas à obtenir une réponse et que vous la clouez. Merci! encapsulation: ViewEncapsulation.None ne l'a fait.
De rien. certaines bibliothèques ne sont pas rendues dans notre DOM principal en utilisant le composant DOM donc notre style de page n'a pas d'effet sur elles et devrait définir leurs styles dans un fichier de style global.
essayez celui-ci dans le fichier css
::ng-deep {
.custom-slider .ng5-slider .ng5-slider-selection {
background: #DF495B;
}
}
j'espère que cela fonctionnera
J'ai donc essayé tellement de façons différentes et j'ai finalement trouvé que le premier que vous devez suivre un chemin pour entrer comme ici en utilisant parent est ng5-slider, puis voir dans la console ses éléments enfants et sélectionner la dernière classe à partir de celui-ci et si vous l'ajoutez dans global styles.css, vous n'avez pas besoin d'ajouter :: ng-deep, vous pouvez omettre le crochet :: ng-deep.
::ng-deep {
.ng5-slider {
.ng5-slider-selection {
background: $brand-blue !important;
}
.ng5-slider-floor,
.ng5-slider-model-value,
.ng5-slider-model-value,
.ng5-slider-model-high,
.ng5-slider-ceil,
.ng5-slider-combined {
display: none !important;
}
}
}
Bien que ce code puisse résoudre la question, y compris une explication expliquant comment et pourquoi cela résout le problème aiderait vraiment à améliorer la qualité de votre poste, et entraînera probablement plus de votes positifs. N'oubliez pas que vous répondez à la question des lecteurs à l'avenir, pas seulement à la personne qui la pose maintenant. Veuillez modifier votre réponse pour ajouter des explications et donner une indication des limitations et hypothèses applicables. De l'avis
Vous pouvez simplement mettre les styles que vous avez définis dans
styles.scss(le fichier de styles global) et cela fonctionnera. Je considère que c'est une meilleure solution que de changer ViewEncapsulation , car le fait de changer ViewEncapsulation sur None peut affecter tous les autres styles de votre application entière (ce qui peut produire un comportement indésirable) ...