Avoid wrapping element style-overrides

Hi. I love the Ionic Framework!

I am trying to combine local styling with the platform defaults in a good way. The question goes for this kind of nesting of components in general, but using one specific case to as an example here.

I have styled the ion-button component (IonButton in React) by setting a lot of css variables (like --border-radius etc). Simplified example:

ion-button {
  --border-radius: 8px;
}

That works very well, but once I put the component inside a IonButtons to place it in a toolbar (like the documentation suggests), it sets a different border-radius (and other css props). I found this source styling causing it:

.sc-ion-buttons-md-s ion-button:not(.button-round) {
    --border-radius: 2px;
}

I tried a few things to avoid this and get it to use the styles I set on the button (since I want the button to have the same styles inside the header as the default button style), like:

• Setting styles with a class instead of the element (.button instead of ion-button, BEM-style)
• Nesting the style rules in buttons like this: ion-buttons ion-button { --border-radius: 8px; }}
• Using the not-selector in case that would override the above rule, like this: ion-buttons ion-button:not(.button-round)

Nothing seems to work except setting !important which is not a good solution in my experience. Hardcoding the same rule (.sc-ion-buttons-md-s ion-button:not(.button-round)) in my styling seems wrong as well, as it ties it closely to the implementation of the ionic inner features and that might change.

So, how should these overriding issues best be solved?

1 post - 1 participant

Read full topic