How to change the content of CSS node modules in Ionic react?

Issue

Is there any way to change the content of CSS node modules in Ionic React? I have created some external css for my App but the css in import "@ionic/react/css/typography.css" overwrites my css. For example, I cannot change some margins, text color, etc. I also tried to change some css inside typography.css but the changes are not loaded in the app. It's like I have changed nothing inside typography.css.
The first time I'm working with CSS in an Ionic App and I feel really confused. Any help would be appreciated.

Solution

Ionic is using Shadow DOM, you can read more about it in their blog post. This feature is very useful to isolate components but it is also preventing you to modify the css from outside.

To fix this problem, Ionic introduced a lot of custom CSS Variables that you can use to modify the styling of each component. This is the best way to modify the CSS of an Ionic app.

You can also read about shadow parts in another blog post and he docs, but this is less recommended.

Answered By - Poney