how to set platform specific css (different styles for android and ios) in ionic4

user_6696083 0
Viewed 3873

To set specific styles to "ListingPage" for android and ios in ionic 3, I was using below structure in .scss file of the "Listing" page/component:

.ios {  // for ios
    page-listing { // page selector
        // css enclosed in class or id selectors
    }
}

.md {  // for android
    page-listing { // page selector
        // css enclosed in class or id selectors
    }
}

How can I achieve the same platform specific styling in ionic4.

angular7 ionic4 sass css
2 Answers

I think you now have to manually add an element with class/id in your component.

<div class="page-listing">Something</div>

.page-listing {
   color: red;
}

.ios .page-listing {
   color: yellow;
}

.md .page-listing {
   color: pink;
}
user_31186840
user_96758040
Related