Taking an ion-button as example. Say I want to add some custom styles in css. I have a few fixed styles I want to consistently use in terms, so ideally I can constrain my ion-buttons to keep them consistent throughout all my apps that use them. Simple example - I want secondary and tertiary buttons to default to outline style. I can achieve this pretty easily by creating a custom component, but it's such a horrible over the top approach. The whole point of using ionic components is that they are flexible enough to be useful. But I am not finding that to be the case. // Defaults display: inline-flex; // Make sure button doesn't take full width by default align-items: center; justify-content: center; text-transform: none !important; // Disable uppercase globally for ion-buttons (need to force it!) padding: 0; // Ionic adds 5px padding top & bottom margin: 0; // remove outer margin (beyond the border-box) box-sizing: border-box !important; // Color theming (default="primary") &, & { --background: var(--app-bg) !important; /* Transparent background for outline */ --border-width: 1px !important; /* Add border width */ --border-style: solid !important; /* Solid border */ --border-color: var(--ion-color) !important; /* Border color matches the button color */ --color: var(--ion-color) !important; /* Text color matches the button color */ } Notice that I have to use !important to stop ionic making all the text uppercase. It's very annoying that the priority is not given to custom styles by default. The intent is obviously to override the defaults. As for the code above to try to override the fill & borders etc for secondary and tertiary buttons, it half works. Which is the most annoying thing ever. The boarder work. But none of the colors work. I shoved !important in everywhere, but to no avail. Why won't ionic accept custom styles. Do they want every single app to look identical? Continue reading...
