React实现亚马逊头部组件时图片无法缩小的问题求助

我跟着YouTube教程做亚马逊首页头部组件，但浏览器左侧的亚马逊Logo没法缩小显示。下面是我的代码：

Header.js 代码 #

import React from 'react';
import "./Header.css";
import SearchIcon from '@mui/icons-material/Search';
import { IconButton } from '@mui/material';
import AddShoppingCartOutlinedIcon from '@mui/icons-material/AddShoppingCartOutlined';

function Header() {
  return (
    <div className="header">
        <img 
            classname="header__logo"
            src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
            alt="amazon logo"
        />

        <div className="header__nav">
            <div className="header__option">
                <span className="header__optionLineOne">Deliver to</span>
                <span className="header__optionLineTwo">Singapore</span>
                
            </div>  
        </div>

        <div className="header__search">
            <button className="header__searchFilter">All</button>
            <input className="header__searchInput" type="text"></input>
            <IconButton>
                <SearchIcon className="header__searchIcon" />
            </IconButton>
        </div>

        <div className="header__nav">
            <div className="header__option">
                <span className="header__optionLineOne">Hello, sign in</span>
                <span className="header__optionLineTwo">Account & Lists</span>
                
            </div>  
        </div>

        <div className="header__nav">
            <div className="header__option">
                <span className="header__optionLineOne">Returns</span>
                <span className="header__optionLineTwo">& Orders</span>
            </div>  
        </div>

        <div className="header__nav">
            <div className="header__option">
                <AddShoppingCartOutlinedIcon className="optionCart" />
                <span className="header__optionLineTwo">Cart</span>
            </div>  
        </div>

    </div>
  )
}

export default Header

Header.css 代码 #

.header {
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #131921;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header__logo {
  width: 100px;
  object-fit: contain;
  margin: 0 20px;
  margin-top: 18px;
}

.header__search {
    display: flex;
    flex: 1;
    align-items: center;
    border-radius: 24px;
}

.header__searchInput {
    height: 12px;
    padding: 10px;
    border: none;
    width: 100%;
}

.header__searchIcon {
    padding: 5px;
    height: 22px;
    background-color: #cd9042;
}

.header__optionLineOne {
    font-size: 10px;
    color: white;
  }
  
  .header__optionLineTwo {
    font-size: 13px;
    font-weight: 800;
    color: white;
  }

  .header__optionCart {
    display: flex;
    align-items: center;
    color: white;
  }

  .header__nav {
    display: flex;
    justify-content: space-evenly;
  }

当前渲染效果 #

预期效果 #

请帮忙找出问题所在，谢谢！

1. 核心问题：React类名拼写错误 #

在Header.js的img标签里，你写的是classname="header__logo"，但React中指定类名必须用**className**（注意大写的N）。这个错误直接导致CSS里的.header__logo样式完全不生效，Logo自然不会缩小。

2. 额外布局优化建议 #

• 多个独立的header__nav容器会导致导航项布局分散，建议把所有header__option合并到同一个header__nav里，更贴近亚马逊的原始布局：

  <div className="header__nav">
      <div className="header__option">
          <span className="header__optionLineOne">Deliver to</span>
          <span className="header__optionLineTwo">Singapore</span>
      </div>
      <div className="header__option">
          <span className="header__optionLineOne">Hello, sign in</span>
          <span className="header__optionLineTwo">Account & Lists</span>
      </div>
      <div className="header__option">
          <span className="header__optionLineOne">Returns</span>
          <span className="header__optionLineTwo">& Orders</span>
      </div>
      <div className="header__option">
          <AddShoppingCartOutlinedIcon className="header__optionCart" />
          <span className="header__optionLineTwo">Cart</span>
      </div>
  </div>
  

• 购物车图标的类名也需要修正：你写的是className="optionCart"，但CSS里对应的是.header__optionCart，两者要统一。

修复后的关键代码片段 #

修改后的img标签：

<img 
    className="header__logo"
    src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
    alt="amazon logo"
/>

修改后的购物车图标部分：

<AddShoppingCartOutlinedIcon className="header__optionCart" />

完成以上修改后，Logo会应用CSS中的宽度限制缩小到100px，导航布局也会更贴近预期效果。

内容的提问来源于stack exchange，提问作者odebear