React中hover父组件时如何用CSS覆盖图标内联背景样式？

这里有几个可行的解决方案，按推荐程度排序：

1. 使用CSS变量替代内联样式 #

把原本内联设置的背景色放到父元素的CSS变量中，子元素通过变量引用，hover时直接修改变量或设置新颜色，既能保留动态赋值的能力，又能让CSS正常生效。

修改JSX代码：

<div className="service-card--wrapper">
    <div className="service-card" style={{ '--bg-color': service.color }}>
        <div className="service__icon">
            {service.icon}
        </div>
        <div className="service__title">{service.title}</div>
        <p className="service__para">{service.paragraph}</p>
        <button className="service__btn"><FaArrowRight/></button>
    </div>
</div>

对应的CSS：

.service__icon {
    background-color: var(--bg-color);
}

.service-card:hover .service__icon {
    background-color: #你的hover目标颜色;
}

2. 通过React状态控制hover状态 #

监听卡片的鼠标进入/离开事件，用状态切换背景色，完全通过内联样式控制，绕开CSS优先级冲突。

首先在组件中添加状态：

import { useState } from 'react';

// 组件内部
const [isCardHovered, setIsCardHovered] = useState(false);

然后修改JSX：

<div className="service-card--wrapper">
    <div 
        className="service-card"
        onMouseEnter={() => setIsCardHovered(true)}
        onMouseLeave={() => setIsCardHovered(false)}
    >
        <div 
            className="service__icon" 
            style={{
                backgroundColor: isCardHovered ? '#你的hover目标颜色' : service.color
            }}
        >
            {service.icon}
        </div>
        <div className="service__title">{service.title}</div>
        <p className="service__para">{service.paragraph}</p>
        <button className="service__btn"><FaArrowRight/></button>
    </div>
</div>

3. 使用!important强制覆盖（不推荐） #

这是应急方案，通过!important提升CSS规则优先级，强制覆盖内联样式，但会增加样式维护难度，不建议在复杂项目中使用。

CSS代码：

.service-card:hover .service__icon {
    background-color: #你的hover目标颜色 !important;
}

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