Styling is not working in react component

September 26, 2022

Here I am getting my data from redux store and simply I am displaying it and here I also have a wrapper div which is wrapping the whole content and the problem here is this div is not accepting any kind of styling I have tried margins, padding, background colors but all avail because it is not accepting any style at all:

import React from "react";
import { useSelector } from "react-redux";
import "./Product.css";
import { Link } from "react-router-dom";

const Product = () => {
  let DUMMY_DATA = useSelector((state) => state.data.DUMMY_DATA);

  return (
    <div classsName="wrapper"> // <-- this div element
      {DUMMY_DATA.map((val) => {
        return (
          <div className="card">
            <img src={val.product_image} alt="" className="image" />
            <div className="description">{val.product_description}</div>
            <div className="price">{val.product_price}</div>
          </div>
        );
      })}
    </div>
  );
};

export default Product;

CSS:

.card {
  padding: 10px;
  margin: 10px;
  width: 13rem;
  height: 18rem;
  display: inline-block;
}

.card:hover {
  box-shadow: 2px 2px 5px black, -2px -2px 15px black;
  cursor: pointer;
}

.image {
  width: inherit;
  height: 13rem;
}

.price {
  margin-top: 5%;
  font-size: 18px;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  color: orangered;
}

.wrapper {
  margin: 50px;
  padding: 50px;
  background-color: red;
}