How to use CSS on Ionic 4

Ionic Framework
1

That could sound weird, but I’m really new on ionic and I’m having problems figuring out how to use it.

How can I overwrite the global scss using the pages’ css?

I’d like to have a sample…

this is how I was doing on ionic 3:

page-list-master {

    ion-slides {
        height: 50%;
        background-color: #090F11;
        background-size: 100% auto; 
        background-repeat: no-repeat;
        padding-top: 16px;
        padding-bottom: 16px;
        -moz-box-shadow:    inset 0 0 4px #000000;
        -webkit-box-shadow: inset 0 0 4px #000000;
        box-shadow:         inset 0 0 4px #000000;
     }
}

How can I do the same thing on ionic 4?

2 Likes
2

You are not alone, @joshmorony wrote some introduction on that subject, I recommend going thru these tutorials even if I hope that he will write some more deeper tutorials soon about it :wink:

introduction to css4 variables: https://www.joshmorony.com/a-primer-on-css-4-variables-for-ionic-4/

migration guide: https://www.joshmorony.com/the-ionic-4-migration-survival-guide/

shadow dom and styling: https://www.joshmorony.com/shadow-dom-usage-in-ionic-web-components/

1 Like
3

@joshmorony tutorial for its not so helpful.

I am trying to hide currently selected value for <ion-select> that i can see its under shadow-root(open) <div role="textbox" aria-multiline="false" class="select-text">Female</div> after trying all the solutions that has been mention on internet nothing happen.

If somebody help me how i can apply css to

class=“select-text” in ionic 4 will be really helpfull for me.

29%20AM

thanks in advance

4

work with classes !!!

5

can you please give example? @eraldguri

6 
<div class="example">
<ion-item></ion-item>(or something else:button etc)
</div>

in CSS:
.example {
color:
width:
}

2 Likes
7

But if we already have an element called “app-home” - why add a class to it just to style it ?
vs simply app-home { background-color: dark } ?