I really like Ionic. I’m quite fast with programming everything of logic and functionality.
But honestly I have to say the Styling part of Ionic is still a huge pain in the ass for me (sorry to say ).
It really takes so much time for me.
I think I understand the concept so far and was is written here in the documentation:
But I always have strange behaviours and a lot of things which don’t work as expected.
My problem now:
I copied the ion-segment example of the official ionic-documentation to my app (page).
Example I used: https://github.com/ionic-team/ionic-docs/blob/1fb1f7e658e4cbcc4cdf92534b7bdde3f3967b51/src/demos/api/segment/index.html
The colors are all still default. And also the default background color of the app is white.
In the example you see the ion-segements are using the color settings like ‘warning, danger’ and so on…
But in a slightly lighter color version which I like.
But when I change ONLY the background custom variable in variables.scss
it looks like this:
You see the background-color shines anyhow through the ion-segements.
I see the same effect also on other built in ionic-components.
How can I use the background color that it has no impact on the ion-segment?
The solution should be like this:
Maybe there is a simple solution, but I also want to understand it.
I don’t understand why the background color can have an impact to those ionic-components since
there are built as Web Components and should be encapsulated?
Thanks for any support