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.
2 Answers
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 cssYour can learn more on link below:
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
3 Comments
Dario Piotrowicz
amazing, I did not know React provided such tool :), usually I used scss and encapsulated all the rules in a selector for the component, thus preventing css to bleed out between components. Great to know this now, thanks! :)
milanb0z
I'm glad you were able to solve the problem. This way css uses randomly generated classes so that unnecessary classes will not be applied
Hydra
ı cant use or change the classnames or addçstyle on left to them ı want them to look different on product page and different on homepage
Create a separate css file for each page.
Then use
import './Product.css';
2 Comments
Hydra
that didnt worked out for me the home page was getting a classnames styling fro another page even though it had its own styling in home.css file
KnowYourElements
Is it possible to show the code of Home Page and the Product Page?