React js how can i use css modules

Question

Im currently using a component on two different page one is home page and one is product page and when I change the css of the product page the home page is also changing when I use the classes of the component how can I style the classes of this component for each css pages differently.

Answer 1

You need to name your file with .modules.css..

Then import styles from css/scss file in your component

"import styles from './.module.css';" <--- Example

"btn" is example class in your css

Your can learn more on link below:

https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

Answer 2

Create a separate css file for each page.

Then use

import './Product.css';