ReactJS how to apply one css class with different styles for different pages?

Question

React

I have several pages in my applications, all set up with routing. There are also cards with goods of 3 types and all have different styles. I would like to use a single class for all products

.product-card

and there is already a BAM (.product-card__photo, .product-card__title ...), but React will not allow me to do this because I have a SPA and the styles will interrupt each other. Are there any solutions to this problem except "come up with an individual class for each product"?

Answer 1

Firstly, in react className
Secondly, nothing should interrupt each other, create a file, example.css, import it where you need it, in any component or page, and you can already apply this className in this component. As well as an option, you can connect all this through index.css, but then if I'm not mistaken, you need scss, and import