The great Ionic component library makes us create displays fast and easy. I encountered a bug with Ionic buttons:
<ion-button class="ion-no-padding">Back to overview</ion-button>
I expected a button with no padding on the left and the right. Because when you look at the CSS of "ion-no-padding" in node_modules/@ionic/angular/css/padding.css, it says:
.ion-no-padding {
--padding-start: 0;
--padding-end: 0;
--padding-top: 0;
--padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
}
I had to use old-school "!important" to my custom CSS for this to work properly:
.ion-no-padding {
--padding-start: 0 !important;
--padding-end: 0 !important;
--padding-top: 0 !important;
--padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}