web-dev-qa-db-fra.com

Comment définir la couleur de fond IONIC 4

J'ai des problèmes pour essayer de changer la couleur de fond dans une seule page IONIC 4 (--type = angular). J'essaie d'ajouter une classe pour le contenu en ions. Dans mon fichier html j'ai:

<ion-content class="fondologin">
...
</ion-content>

Dans mon cul, j'ai:

.fondologin{
    background-color: #111D12!important;
}

La couleur de fond n'est jamais changée. Si j'ajoute --ion-background-color: # 111D12; dans variables.scss, l’arrière-plan a été modifié avec succès pour chaque page, mais j’en modifie une pour changer la couleur d’une page. Comment puis-je atteindre cet objectif?

angularionic-frameworkionic4
6
Kevin Sanchez

Pour une raison quelconque, je l'ai résolu de cette façon:

Tout d'abord, j'ai ajouté --ion-background-color:#ffffff; dans le fichier variables.scss dans le dossier du thème. 

Dans ma page scss j'ai écrit:

ion-content{

    --ion-background-color:#111D12;
}

Après cela, l’arrière-plan a été défini avec succès.

18
Kevin Sanchez

Je vais republier la réponse la plus commentée, avec une explication supplémentaire

ion-content{
    --ion-background-color:#111D12;
}

A partir de ionic 4, le composant ionique implémente le concept de shadowDOM et l'ancienne méthode de recherche de sélecteurs CSS dans le composant qui implémente shadowDOM ne fonctionne plus.

En tant que tel, toute modification ne peut être effectuée que si vous modifiez la variable référencée par le composant.

par exemple, si les références de contenu ionique

--ion-background-color: #ffffff

La seule façon de modifier la couleur de fond est de le faire dans votre fichier css

ion-content{
    --ion-background-color:#111D12;
}
3
Edward Choh

vous pouvez utiliser comme ça ... fonctionne bien dans ma page

ion-content{
    --background: #fff url('../../assets/imgs/intro.png') no-repeat center center / cover;
}

j'espère que cela vous aidera :)

0
user9088454

Essaye celui-là: 

    :Host {
      ion-content {
        ion-background-color: #d5ffd5;
      }
    }

//Or 

 page-name{
      ion-content {
        ion-background-color: #d5ffd5;
      }
    }
0
Rahul Jograna

Pour changer le fond sur une seule page:

ion-content{
--ion-background-color:  #00ABE1 !important;
}

N'oubliez pas le! Important ou cela pourrait ne pas fonctionner.

0
Ivo Nikolov

C'est peut-être votre sélecteur CSS qui n'est pas assez précis.

Essaye ça :

ion-content.fondologin{
    background-color: #111D12!important;
}

Si cela ne fonctionne toujours pas, vérifiez votre élément de contenu ionique et essayez de trouver votre code CSS et la propriété ou le sélecteur le remplaçant

0
rguerin