React js how can i use css modules

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.
heres the component

import React from "react";
import { useStateValue } from "./StateProvider";
import { Link } from 'react-router-dom';

function Product({ title, image, price, rating, discount }) {
  const [{ basket }, dispatch] = useStateValue();

  const addToBasket = () => {


      type: 'ADD_TO_BASKET',
      item: {
        title: title,
        image: image,
        price: price,
        rating: rating,


  function showToast(text){
    var x=document.getElementById("toast");

  return (
      <div className="product">
      <p className="product__title">{title}</p>
      <p className="product__price">
      <p className="product__discount">{discount}</p>
      <img src="{image}" alt="" />
      <button onClick={() => { addToBasket(); showToast('Added to cart');}} id="ee" className="addtobasket">
        Add to Basket
      <button className="buynow">Buy Now</button>
      <div id="toast">


export default Product;

A post was merged into an existing topic: React js different css same component