React+TypeScript中如何通过内联样式实现Div hover修改背景色

方法一：用React状态管理（推荐，符合React数据流） #

React里不建议直接操作DOM元素样式，最好通过状态控制内联样式变化。你可以加个状态变量记录悬停状态，动态生成样式：

import { useState } from 'react';

// 组件内部
const [isHovering, setIsHovering] = useState(false);

// 合并基础样式和动态悬停样式
const dynamicButtonStyle: React.CSSProperties = {
  ...buttonstyle,
  backgroundColor: isHovering ? '#e0e0e0' : '#ffffff', // 替换成你需要的正常/悬停背景色
};

// 悬停状态切换函数
const handleMouseOver = () => setIsHovering(true);
const handleMouseOut = () => setIsHovering(false);

// 渲染div
<div
  onClick={() => setDropDownOpen(prev => !prev)}
  style={dynamicButtonStyle}
  onMouseOver={handleMouseOver}
  onMouseOut={handleMouseOut}
>
  {/* 你的内容 */}
</div>

const buttonstyle: React.CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  gap: '20px',
  backgroundColor: '#ffffff', // 初始背景色
};

方法二：直接操作DOM元素（不推荐，但满足直接访问元素的需求） #

如果非要通过事件对象操作DOM，注意用event.currentTarget（永远指向绑定事件的元素，避免子元素干扰），还要做类型断言：

function lightenBackground(event: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
  const divElement = event.currentTarget as HTMLDivElement;
  divElement.style.backgroundColor = '#e0e0e0';
}

// 记得加鼠标移出事件恢复原样式
function resetBackground(event: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
  const divElement = event.currentTarget as HTMLDivElement;
  divElement.style.backgroundColor = '#ffffff';
}

// 渲染div
<div
  onClick={() => setDropDownOpen(prev => !prev)}
  style={buttonstyle}
  onMouseOver={lightenBackground}
  onMouseOut={resetBackground}
>
  {/* 你的内容 */}
</div>

const buttonstyle: React.CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  gap: '20px',
  backgroundColor: '#ffffff',
};

你之前拿不到样式属性的原因：

• 若div内部有子元素，event.target会指向子元素而非div本身；
• 即使target是div，TypeScript默认不会将其推断为HTMLDivElement，需要手动类型断言。

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