CSS on host element

Ionic Framework
1

I apologize as I’m sure similar things have been asked before, but I fail to find them when searching. I’m just getting started with my first Ionic app.

How can I override the CSS for the :host elements for the entire Ionic app that I’m making? Where are the default styles for that element coming from? Where would I place overrides? Ideally I would like to unset all of them.

I understand the basics of variables and encapsulation and I’m fine using them for most things, I just want the :host element to have no styles.

2

Digging into this a bit more it looks like :host is declared in many many files all over the place. This is problematic. Does anyone know where the original declaration is where all of these all inherit from?

3

I figured out a janky workaround that will have to do for now. In my global CSS file I added declarations for ion-content. Here’s an example:

ion-content {
   --ion-background-color: transparent;
   ... etc
}
1 Like