How to make css not global

Ionic Framework Ionic React
1

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
2

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

3

yes, solved it with modular css!