React项目中img行内属性可调整尺寸但CSS类不生效问题

1. CSS尺寸属性缺少单位
   你编写的.App-logo类样式中，height: 100和width: 100属于无效属性值：除0和特殊百分比、flex系数等场景外，所有CSS长度值必须附带明确单位（如px、rem、%等），浏览器会直接忽略无效属性，因此类样式未生效。而HTML原生行内属性width="100" height="100"默认单位为px，符合渲染规则所以生效。

2. 样式引入位置不符合规范
   你将<link>样式引入标签放在了React组件的内部DOM节点中，按HTML规范link标签仅允许在文档<head>区域生效，放在组件内部可能出现样式加载时序异常、渲染逻辑拦截导致样式未被正确识别的问题。

3. 样式作用域不匹配
   如果你的项目开启了CSS Modules配置，普通.css文件中的类名会被编译为带哈希后缀的字符串，你在组件中直接写className='App-logo'无法匹配编译后的类名，导致样式失效。

4. 通用选择器规则覆盖
   当.App-logo的宽高属性被忽略后，通用img选择器的height: inherit; width: inherit规则会生效，继承父级.App-header的宽高属性，如果父级未设置固定宽高，也会导致图片尺寸异常。

• 修正CSS属性写法，给宽高添加明确单位：

.App-logo {
  height: 100px;
  pointer-events: none;
  width: 100px;
}

• 调整样式引入方式：删除组件内部的<link>标签，在组件JS文件顶部直接引入样式：

import './App.css'

如果要通过link标签引入，将其移到项目public/index.html的<head>标签内。

• 适配CSS Modules规则：如果项目开启了CSS Modules，将样式文件重命名为App.module.css，引入和使用方式调整为：

import styles from './App.module.css'

// 组件内写法
<img src={logo} className={styles['App-logo']} alt='logo' />

• 优化通用样式逻辑：如果不需要全局强制img继承父级宽高，删除img选择器中的height: inherit; width: inherit规则即可，类选择器优先级本身高于元素选择器，不需要额外加权重。

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