How to make css not global

Hello i am making my first react ionic application and i have a question about styling.

I used the tabs ionic project template.

I have a page called ‘home.tsx’ and a css file ‘home.css’. Inside is a custom created component. this component is called ‘CustomCard.tsx’ and i have a ‘CustomCard.css’ file.

my problem is that when i use the CustomCard component inside my home.tsx, the css of the CustomCard.css file also gets used.

For example:

In CustomCard.css there is

h1{ color: red; }

i import the CustomCard.css in CustomCard.tsx

I use the CustomCard component inside my Home page.

When i now place a h1 inside my Home.tsx (or inside my app.tsx aswell) it will also be colored red.
I only want the css of a certain component or page working for that particular component or page.

Am i doing something wrong or is this always like this with ionic/react (in that case, how do people generally handle it)?

1 Like

By default, all CSS in Ionic is global.

However, with Ionic React, you can use any CSS scoping tool available for React, and it should just work.

Some ideas from Stack Overflow

yes, solved it with modular css!