[Ionic 4] Platform Specific Style in Component

Ionic Framework
1

In Ionic 4 / Angular 6, how do I style a custom component for ios or md only?

This doesn’t work in my components .scss:

:root .ios .my-component {
    background-color: red !important!;
}

I could add classes to each of my components in .ts but this approach seems redundant give there’s a class already on the html element.

2

Did you find a solution for this?

3

If anybody of you find the solution then please post the solution here… Thank !

brother @lucasbasquerotto if you have any solution then plz post here.

4

@pantarmj I’m still using Ionic 3 in my main app (it’s already in production, so I’m not thinking in migrating to Ionic 4 yet) and have not used Ionic 4 very much. I don’t know if there is a way to style a component specific to a platform without doing something in the ts file (like adding a dynamic class to the component, based on the platform).

Assuming there is already a class in the html of your custom element that specifies the platform (let’s say, <my-component class="ios ..." ...> ... </my-component>), then you should be able to access with :root.ios { ... }, where root refers to your component (assuming it’s the css of your custom component itself), or with my-custom-component.ios { ... } to access from the outside of the component.

5 
.ios :host .my-component {
    background-color: red !important!;
}
4 Likes
6

Can you explain what the :host do?

7

I would always look to MDN to answer questions like this.