如何在React中通过CSS覆盖内联HTML样式实现悬停效果

<div className="service__icon" style={{backgroundColor:`${service.color}`}}>
    {service.icon}
</div>

/* ServiceCard.css */

/* 定义 .service__icon 的默认样式，如果内联样式被移除，这个可以作为备用 */
.service__icon {
    /* 默认的背景色，或者其他样式 */
    transition: background-color 0.3s ease; /* 添加过渡效果 */
}

/* 当 .service-card 悬停时，改变 .service__icon 的背景色 */
.service-card:hover .service__icon {
    background-color: #ff0000 !important; /* 使用 !important 强制覆盖内联样式 */
}

// ServiceCard.jsx
import React from 'react';
import { FaArrowRight } from 'react-icons/fa';
// 导入你的CSS文件
import './ServiceCard.css';

const ServiceCard = ({ service }) => {
    return (
        <div className="service-card--wrapper">
            <div className="service-card">
                {/* 根据 service.color 动态添加类名 */}
                {/* 假设 service.color 的值为 'red', 'blue' 等，则生成 'service__icon--red' 类 */}
                <div className={`service__icon service__icon--${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>
    );
};

export default ServiceCard;

/* ServiceCard.css */

/* 基础图标样式 */
.service__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px; /* 示例尺寸 */
    height: 60px;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
}

/* 定义不同颜色的基础背景色 */
.service__icon--red {
    background-color: #ffcccc; /* 浅红色 */
}
.service__icon--blue {
    background-color: #cceeff; /* 浅蓝色 */
}
.service__icon--green {
    background-color: #ccffcc; /* 浅绿色 */
}
/* ... 可以根据需要添加更多颜色类 */

/* 定义悬停效果 */
/* 当 .service-card 悬停时，改变其内部 .service__icon 的背景色 */
.service-card:hover .service__icon {
    background-color: #333; /* 悬停时统一变为深灰色 */
    transform: translateY(-5px); /* 悬停时略微上移 */
}

/* 如果需要针对不同颜色有不同的悬停效果，可以这样写： */
.service-card:hover .service__icon--red {
    background-color: #ff0000; /* 悬停时变为深红 */
}
.service-card:hover .service__icon--blue {
    background-color: #0000ff; /* 悬停时变为深蓝 */
}

import React, { useState } from 'react';
import { FaArrowRight } from 'react-icons/fa'; // 假设这个图标库

// 导入你的CSS文件（如果还有其他非背景色的样式需要）
import './ServiceCard.css';

const ServiceCard = ({ service }) => {
    const [isHovered, setIsHovered] = useState(false);

    // 根据悬停状态和原始颜色决定最终背景色
    // 如果 isHovered 为 true，背景色为 #ff0000 (红色)，否则使用 service.color
    const iconBackgroundColor = isHovered ? '#ff0000' : service.color;

    return (
        <div className="service-card--wrapper">
            <div
                className="service-card"
                // 监听鼠标进入和离开事件，更新 isHovered 状态
                onMouseEnter={() => setIsHovered(true)}
                onMouseLeave={() => setIsHovered(false)}
            >
                <div
                    className="service__icon"
                    // 动态设置背景色
                    style={{ backgroundColor: iconBackgroundColor }}
                >
                    {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>
    );
};

export default ServiceCard;