零错误，为什么 CSS 样式没有反映在浏览器上？ [关闭]答案

【问题标题】：With zero errors, why CSS styling are not reflecting on browser? [closed]零错误，为什么 CSS 样式没有反映在浏览器上？ [关闭]
【发布时间】：2021-03-22 04:57:56
【问题描述】：

产品组件中的产品图片未呈现Product.css文件中给定的样式。

Header 和 Home 组件样式工作正常，但 Product 样式不行。

我检查了一切，似乎一切都很好，但我还是摸不着头脑去寻找盲点。

输出

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;
}

这里我在 Home.js 文件中渲染 Product 组件

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;

【问题讨论】：

第一个 div 中的错字，应该是 className。

标签： javascript html css reactjs

【解决方案1】：

classname 属性应该是 className (camelCase)。

来自docs，

要指定 CSS 类，请使用 className 属性。这适用于所有常规 DOM 和 SVG 元素，例如 <div>、<a> 等。

【讨论】：