React应用中Header Logo的CSS样式不生效问题求助

核心问题 #

你在React组件的img标签里把className写成了classname（注意n是小写），React中元素的类名属性必须用驼峰式的className，小写的classname不会被识别为类名属性，导致CSS里的.headerLogo选择器找不到对应的元素，自然无法应用样式。

修复步骤 #

1. 修正img标签的属性名
   把Header组件里的classname={'headerLogo'}改成className="headerLogo"：

import React from 'react';
import './Header.css';
import amazonlogo from './images/amazonlogo.jpg';

function Header() {
  return (
    <div className='header'>
      <img 
        className="headerLogo"
        src={amazonlogo}
        alt="Amazon Logo" // 建议加上alt属性，提升页面可访问性
      />
    </div>
  );
}

export default Header;

2. 优化CSS的sticky定位
   你的.header里top: 10缺少单位，sticky定位需要明确的数值单位，改成top: 0或者top: 10px：

.header {
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #131921;
    position: sticky;
    top: 0; /* 补上单位，推荐用0固定在顶部 */
    z-index: 100;
}

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

3. 移除冗余的CSS引入
   App.js里重复引入了./Header.css，只需要在Header组件里引入一次即可，删掉App.js里的import './Header.css'：

import Header from './Header'
import './App.css'

function App() {
  return (
    <div className="app">
      {/* header */}
      <Header/>
      {/* home */}
    </div>
  );
}

export default App;

做完这些修改后，Logo的样式应该就能正常生效，尺寸会被限制在100px，适配导航栏高度了。

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