How to apply custom css to ionic 4 components?

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).