React JS中内联样式编写&:hover不生效的原因

尝试为span element添加hover effect时，出现两种差异表现：

• 将hover效果直接写在元素的style属性内时，效果完全不生效
• 将hover样式写在独立CSS文件中时，效果可以正常触发

核心疑问：出现该现象的根本原因是什么？

复现代码 #

App.js 代码 #

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <span
        style={{
          fontSize: "4em",
          color: "blue",
          "&:hover": {
            color: "green"
          }
        }}
      >
        Element
      </span>
      <div></div>
      <span className="ele">Element 2</span>
    </div>
  );
}

styles.css 代码 #

.App {
  font-family: sans-serif;
  text-align: center;
}

.ele {
  font-size: 4em;
  color: blue;
}

.ele:hover {
  font-size: 6em;
  color: green;
}

• 原生HTML、React自带的style属性只支持传入平铺的标准CSS属性键值对，本身不具备解析伪类、嵌套选择器、条件样式规则的能力。你写的"&:hover": { color: "green" }是第三方CSS-in-JS库（比如styled-components、Emotion）自定义的扩展语法，原生环境解析style对象时，会把&:hover识别为无效CSS属性直接丢弃，自然不会产生任何hover效果。
• 写在独立CSS文件中的样式由浏览器原生CSS引擎解析，:hover是CSS标准支持的伪类选择器，浏览器可以正确识别并在鼠标悬停时应用对应样式，所以能正常生效。

补充：如果需要不依赖独立CSS文件实现hover效果，可选择两种方案：

• 引入支持嵌套伪类语法的CSS-in-JS库，由库完成样式语法的编译转换
• 通过JS监听元素的onMouseEnter、onMouseLeave鼠标事件，在触发事件时手动修改元素的内联样式

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