如何在React的style属性中使用伪类？现有hover写法不生效

React的内联style属性只支持原生CSS属性的键值对，不支持伪类选择器（比如:hover），也不识别Sass/Scss的嵌套语法（&::hover属于预处理器专属写法），所以你当前的hover样式完全不会被解析，自然无法生效。

要在不依赖外部CSS文件、CSS类、独立样式对象的前提下实现hover效果，可以利用React状态结合鼠标事件模拟：

import React, { useState } from 'react';

export function App(props) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div>
      <h1
        style={{
          color: isHovered ? 'white' : 'red'
        }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

方案说明 #

• 用useState创建状态isHovered标记元素是否处于hover状态
• 给<h1>绑定onMouseEnter和onMouseLeave事件，实时切换状态值
• 在style属性内通过三元表达式，根据状态动态设置color属性

这种方式完全符合你的限制：所有逻辑都在组件内部的style属性和事件处理中，未使用外部资源、CSS类或独立样式对象。

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