Javascript 如果没有错误，为什么CSS样式不反映在浏览器上？

产品组件中的产品图像没有呈现

product.css

文件中给定的样式

标题和主组件样式工作正常，但与产品样式不同

我检查了所有的东西，似乎一切都很好，但仍然搔头寻找盲点

输出

---

classname

属性应该是

classname

（

camelCase

）

从

要指定CSS类，请使用

className

属性。这适用于所有常规DOM和SVG元素，如

，

，以及其他元素

---

第一个div中的输入错误应该是className。

import React from 'react'
import "./Product.css";


  const Product = () => {
       return (
       <div classname='product'>
        <div className='product__info'>
            <p>The Lean Startup:
                How Constant Innovation 
                Creates Radically successful Businesses
            </p>

            <p className='product__price'>
                <small>$</small><strong>19.99</strong>
            </p>

            <div className='product__rating'>
                <p className='product__star'>⭐</p>
                <p className='product__star'>⭐</p>
                <p className='product__star'>⭐</p>
                <p className='product__star'>⭐</p>
                <p className='product__star'>⭐</p>

                
            </div>
        </div>

        <img  alt='book' src='https://images-na.ssl-images- 
amazon.com/images/I/51Zymoq7UnL._SX325_BO1,204,203,200_.jpg'
 />

            <button >
                Add to basket
            </button>               
       </div>
      );
     }
     export default Product;
        
    
    
  Product.css file

.product{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:10px;
  padding: 20px;
  width: 100%;
  max-height:400px;
  min-width:300px;
  z-index:1;
  background-color:red;
 }

.product > img {
 max-height:200px;
 width:100%;
 object-fit:contain;
 margin-bottom:15px;
}


.product__price{
height:100px;
margin-bottom:15px;
}

.product > button{
background: #f0c14b;
border:1px solid;
margin-top:10px;
border-color: #a88734 #9c7e31 #846a29;
color: #111;
}

.product__info{
height: 100px;
margin-bottom:15px;
}

import React from 'react'
import './Home.css';
import Product from './Product.js';

const Home = () => {
return (
    <div className='home'>
        <div className='home__container'>
         <img className='home__image' 
            alt='amazon-prime' src="https://images-eu.ssl- 
 images-amazon.com/images/G/02/digital/video/
 merch2016/Hero/Covid19/Generic/
 GWBleedingHero_ENG_COVIDUPDATE__XSite_1500x600_PV_en- 
 GB._CB428684220_.jpg"/>
            
             <div className='home__row'>
                
              <Product/>  
                
             </div>
         </div>         
      </div>
     )
   }

 export default Home;