CODEWITHSUNDEEP
htmlcssreactjsionic-frameworkfrontend
Ani
Ani

Reputation: 938

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

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.

Upvotes: 0

Views: 744

Answers (2)

Jefferk Yacelga
Jefferk Yacelga

Reputation: 151

Because Ionic uses Shadow Dom you can override this with CSS with some Ionic Variables like --background and --color

ion-button { --background: red; }

But many times the changes are not reflected in all the components of the Shadow Root

To modify the css of the Shadown Root you can use the pseudo element :: part as indicated in this publication CUSTOMIZE CSS SHADOW PARTS for example:

ion-button part is "native" so you can use

  ion-button::part(native){
    height: 100px;
    width: 300px;
}

Upvotes: 1

Poney
Poney

Reputation: 511

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.

Upvotes: 1

Related Questions