1
votes

Comment changer la couleur de l'icône du bouton de retour dans Ionic 4?

J'essaie de rendre l'icône du bouton de retour blanche dans la barre d'outils de mon application Ionic 4. J'ai ajouté:

<ion-toolbar>
    <ion-buttons slot="start">
        <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Title</ion-title>
</ion-toolbar>

dans mon global.scss , mais l'icône persiste à être grise. J'ai réussi à rendre le titre de ma barre d'outils blanc.

Voici mon modèle:

ion-back-button {
  --color: white;
}

Je voudrais être capable de définir simplement un style global pour changer la couleur de tous les boutons de retour globalement sans avoir à ajouter un balisage supplémentaire à chaque page avec un bouton de retour.

ionic4 sass

0 commentaires

3 Réponses :

3
votes

Essayez-le dans le fichier global.scss avec

:root {
  ion-back-button {
    --color: red;
  }
}

En le plaçant dans: root fonctionne également selon la documentation:

https://ionicframework.com/docs/theming/css-variables#setting-values p >

ion-back-button{
  --color: white !important;
}

0 commentaires

1
votes

Ajoutez les styles suivants dans le global.scss

ion-icon.sc-ion-back-button-md , ion-icon.sc-ion-back-button-ios
{
  color: #fff !important;
}

0 commentaires

0
votes

J'ai eu le même problème. Peu importe ce que j'ai essayé, je ne pouvais pas changer la couleur du bouton de retour ionique du gris. J'ai donc utilisé les outils de développement Chrome pour inspecter l'élément et j'ai appris qu'un thème pour un module tiers que j'avais chargé appliquait cette couleur grise à toutes les balises span . Heureusement, je n'avais plus besoin de ce module, donc la réponse pour moi était simplement de supprimer la référence au thème.

Le module à l'origine de ce problème était AWS Amplify.

Je publie cette "réponse" ici pour vous aider, vous ou toute autre personne, à passer à la "prochaine étape" dans la résolution de ce problème "exaspérant": utilisez les outils de développement Chrome pour inspecter l'élément du bouton de retour dans le DOM afin d'identifier la règle CSS qui est en cours d'application.

0 commentaires