Changing the default styles of Ionic components can be a bit tricky since the components all use the shadow DOM, meaning we can't write CSS that targets the components inside the shadow DOM directly.
Ionic has custom CSS variables in each component that allows us a lot of customization, and when those aren't enough, they expose CSS parts of the underlying HTML elements that form Ionic components.
For the case of a button you can target the underlying HTML <button> tag:
1ion-button {
2 &::part(native) {
3 // This CSS affects the <button> tag.
4 }
5}Transcript
When we want to change the defaults of an Ionic component, things can get a little bit tricky. Because Ionic components use the Shadow DOM. When the item is using the Shadow DOM, the CSS that we write cannot access this component. Because of that, most of Ionic components have custom CSS properties, so that we can style them however we want. For example, I want to give custom styles to this component.
And as you can see, it works. I'm passing the custom properties here and the CSS is taking the changes. But sometimes we fall a little bit short on what we want to accomplish. For example I want to give a visual indication to the user that this button is being clicked. For that I do have a property and it's colorActivated.
Now when I do it, the user will see that the color of the button changes. But what happens if with the color of the button I also want to change the color of the border? We don't have an actual property to do that. And since we don't have a property, then we have to look into what are the shadow parts that Ionic exposes of their component. In this case, they expose the native shadow part.
This is the native HTML button that you can see here in the shadow DOM. So through the native part we are going to be able to access this button. From this class custom button I want to access the part native and from here now I can use the pseudo class active so this will run whenever this button is active and now I can say I'm going to change the border color wherever this button is active. And you see that now we have a more accurate representation for the user where they click this button.