I’ve just updated my ionic-native plugins from beta.15 to beta.21, and Ionic from “@ionic/angular”: “^4.0.0-beta.8” to “@ionic/angular”: “^4.0.0-beta.12” and all background and background-color are not working.
After some tests, reinstalling and trying to get the culpable, seems like both updates (Ionic and native plugins) cause the same issue, I’ve tried leaving the previous version of Ionic with the newer of plugins and viceversa, but both occasionate the missing background color issue.
Is anybody experiencing the same problem? Thanks.
I was having some trouble with v4 background colors and found that if I changed the css from: background-color: white to: --background: white the problems were fixed.
1 Like
REALLY just inserted this code and worked! @htg thanks!
We will not be able to use regular CSS background for now?
I am sorry, I am not an expert, just a novice. I started Ionic as they were changing from v2 to v3 and now v4 and I have had great difficulty keeping up with it. However, to answer your question: I don’t know. In my case using css worked but not properly and changing to --background worked. I got it from their v4 documentation THEMING/CSS VARIABLES.
1 Like
Ionic 4 uses web components, and these have a shadow DOM, which means we are unable to chnage the styles within these web components. The way to style these components is with the css variables - for example if I want to change the background color of the ion-content you would do this:
ion-content {
–background: white;
}
Use the chrome inspector to find which variables have been used within the shadow DOM of a component.
Hope this helps
have a read of this for more info: https://www.joshmorony.com/shadow-dom-usage-in-ionic-web-components/
1 Like
Many thanks to both, I was working with the previous beta with no issues but probably something in my lock file was not properly updated.