How to apply custom css to ionic 4 components? - css

Question

I am often running into the problem of not knowing what css to change for ionic components. For example I have a button that I am outlining using ionic, my initial guess was to overwrite its outline/border color with something like.
border: 1.2px solid #697954;
But that didnt work so I essentially just had to dig through forum posts until I found that its changed with
--border-color
This seems like an incredibly inefficient method to finding how to overwrite ionic component css variables.
Where can I find exactly what css ionic is using for its components so I can easily overwrite them without digging through forum posts? I checked in the ionic core.css on github, but that didnt give me the info I wanted.
Well know I have border color done correctly, but I need change the onclick background color and the onclick text color. I dont want to dig through the forums again.

Answer 1

As of Ionic 4 component views are encapsulated in a shadow dom and therefore not designed to be easily overwritten with css. Each component has it's own documentation for how you can override common css properties, such as:
https://ionicframework.com/docs/api/button#css-custom-properties
There are a number of guides available for more information about styling shadow doms, such as:
https://www.joshmorony.com/styling-a-shadow-dom-in-ionic-4/
A similar discussion with the example applied to a button can be found here:
Ionic 4 custom styling Shadow DOM
In some situations the Ionic Documentation isn't always up-to-date with the latest CSS variables that are available for a component. A sure-fire way to find out what variables are available is by looking at the master source code on Github for the component's CSS.
For example, if I wanted to see what variables are available for the ion-range component I would look at the range.md.scss file:
:host {
--knob-border-radius: 50%;
--knob-background: var(--bar-background-active);
--knob-box-shadow: none;
--knob-size: 18px;
--bar-height: #{$range-md-bar-height};
--bar-background: #{ion-color(primary, base, 0.26)};
--bar-background-active: #{ion-color(primary, base)};
--bar-border-radius: 0;
--height: #{$range-md-slider-height};
--pin-background: #{ion-color(primary, base)};
--pin-color: #{ion-color(primary, contrast)};
#include padding($range-md-padding-vertical, $range-md-padding-horizontal);
font-size: $range-md-pin-font-size;
}
Here we can see all the variables available for the host component (in this case, ion-range).