I have been fighting a lot with the styling implementations of Ionic. When I use components like ion-button to display a button, it is easy to style it to fit at custom design by using various variables like --color and --background-hover. The problem is when I try to wrap it in other components. When putting it inside a toolbar and ion-buttons, Ionic adds a lot of other classes like .sc-ion-buttons-md-s ion-button:not(.button-round) that override the variables I have set on the ion-button-element in my styles.
But at the toolbars in question, I want the buttons to look just like other buttons. The only way I have found to override this, is to add the variables directly on the native-part, som either ion-button::part(native) { *** } or repeating the style rules on ion-buttons ion-button::part(native). But some styles override this as well. Like some times the button color is overridden by a style set on the .button-native setting color: inherit.
The above details was just one example. I experience quite a bit of these kinds of issues. It seems it is a bit hard to combine custom styles with the default ones. It might be reasons why styles are overridden in certain constexts (like buttons inside a toolbar) but it makes it hard to customize the design to the needs for the application.
I have actually considered dropping ion-components and building all components from scratch. This is for the beginning of an app that will grow a lot over time, so the architectural choices here matters a lot, and getting things up and running quickly (which ionic seems fantastic at) is a bit less important than practical maintainability and development speed over the time of the application lifespan.
So, anyone else here who has considered similar issues? What have you decided to do in cases like this? Thank you!
1 post - 1 participant