React页面图片尺寸无法调整且Banner组件样式不生效求助

我正在开发一个展示各类植物的简单React页面，遇到两个问题：

• lmj-logo图片尺寸远大于预期的45px
• Banner.css中的所有样式都无法应用到Banner.js组件上

我试过在.lmj-logo选择器前加.img前缀，修改样式属性后页面完全没变化。相关代码和src目录结构如下：

Banner.js #

import '../styles/Banner.css'
import logo from '../assets/logo.png'

function Banner() {
    const title = 'La maison jungle'
    return (
        <div className='lmj-banner'>
            <img src={logo} alt='La maison jungle' className='lmj-logo' />
            <h1 className='lmj-title'>{title}</h1>
        </div>
    )
}

export default Banner

Banner.css（修改前） #

.lmj-banner {
    color: black;
    text-align: right;
    padding: 32px;
    border-bottom: solid 3px black;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
}

.lmj-title {
    padding-left: 32px;
}

.lmj-logo  {

    height: 45px;
    width: 45px;
}

Banner.css（修改后） #

.lmj-banner {
    color: red
}

.lmj-title {
    color: blueviolet;
    padding-left: 32px;
    align-items: right;
}

.lmj-logo {
    height: 45px;
    width: 45px;
}

src目录结构 #

src/
├── assets
│   ├── logo.png
│   └── logoFeuille.png:Zone.Identifier
├── components
│   ├── App.js
│   ├── Banner.js
│   └── Cart.js
├── index.js
└── styles
    ├── App.css
    ├── Banner.css
    ├── Cart.css
    ├── banner.css
    └── index.css

问题排查及解决方案 #

1. 样式不生效的核心原因：重复的CSS文件
   看src/styles目录里同时存在Banner.css和banner.css，在区分大小写的系统（Linux/macOS）中会被视为两个独立文件，Windows系统虽不区分大小写，但构建工具可能加载了未修改的那个，导致样式变更不生效。

   • 直接删除其中一个重复文件，保留和你import语句一致的Banner.css，然后重启开发服务器。

2. 图片尺寸不生效的补充排查
   先解决样式文件问题，再打开浏览器开发者工具（F12）的Elements面板检查：

   • 如果.lmj-logo的样式被划掉，说明有更高优先级的样式覆盖了它，可以临时用.lmj-logo { height: 45px !important; width: 45px !important; }测试，后续再优化选择器优先级（比如用.lmj-banner .lmj-logo）。
   • 如果样式根本没出现在元素上，确认import的CSS路径是否正确，有没有拼写错误。

3. 样式写法修正
   .lmj-title里的align-items: right是错误写法，flex布局的align-items取值是flex-start/center/flex-end这类，要让标题右对齐，给.lmj-banner设置justify-content: flex-end（修改前的CSS是对的），或者给.lmj-title加text-align: right。

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