override :host css in ionic framework

Question

how can i override :host css

:host {
--width: 304px;
--min-width: auto;
--max-width: auto;
--height: 100%;
--min-height: auto;
--max-height: auto;
--background: var(--ion-background-color, #fff); // <-- i want to shut this down
inset: 0px;
display: none;
position: absolute;
contain: strict;

}

PS. this css is on ion-content

I'd appreciate any help.

iftikharyk · Accepted Answer · 2021-07-21 21:16:23Z

5

You don't have to change the :host CSS to change the background of ion-content. You can add this to your CSS

ion-content{
    --ion-background-color:#111D12; // Or whatever color you want
}

But if you really want to change :host CSS, then you can add this in your global CSS file.

:host {
    --background: none; // or whatever color you want
}

answered Jul 21, 2021 at 21:16

iftikharyk

9827 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mukash Wasti Over a year ago

got the idea, Thanks

Miguel Stevens Over a year ago

is the :host selector something from css? or is it custom to ionic?

iftikharyk Over a year ago

Its a pseudo-class in CSS, more info developer.mozilla.org/en-US/docs/Web/CSS/:host()

Collectives™ on Stack Overflow

override :host css in ionic framework

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related