Styling 3rd-party components to match Ionic 4

Ionic Framework
1

I’m using a 3rd-party Angular control (ngx-color-picker) within my ionic 4 app which allows CSS classes to be assigned to its ‘internal’ elements such as its buttons. Naturally, I want to create CSS styles matching those of the Ionic components. However, very few of Ionic’s styles are exposed as classes that I can reuse and the underlying SASS code isn’t included in the library.

So it looks like the only way is to clone the whole Ionic repo and import the relevant .scss files into my app.
Is this correct or is there some other, more simpler way of accomplishing this?

2

Use chrome element inspector to get the relevant css attributes u need for the element

3

@Tommertom That might be useful for checking the final result, but it’s just not a sustainable way to ensure that the styling matches. Bear in mind that I’ll have to check multiple elements in multiple states on both iOS and MD platforms, every time Ionic is updated.

So I’m really looking for a solution that references Ionic’s CSS in some way.

4

Hello,
Check out this might be useful to you

5

@gokujy Yes, that’s the component I’m already using (see link in my initial post).