我正在映射一個數據，并將其發送到組件，在那里它為圖標的背景傳遞不同的顏色。但是當我懸停在被渲染的組件上時，我想改變顏色。

``
<div className="service-card--wrapper">
    <div className="service-card">
        <div className="service__icon" style={{backgroundColor:`${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>
``

當它停留在服務卡上時，我想改變顏色，但是CSS沒有覆蓋HTML內聯樣式，有什么方法可以做到嗎？

假設您希望CSS聲明中的樣式覆蓋style屬性中的樣式，那么您需要CSS具有更高的特異性。不幸的是，在這種情況下(據我所知)，唯一的方法就是添加！對CSS中的樣式很重要(或者刪除樣式屬性并使用CSS)。

利用！重要通常是保留給某些明確的覆蓋或作為最后的手段，所以如果你能避免它將是很好的。例如，如果service.color沒有太多選項，您可以為每種顏色創建一個類，然后根據變量而不是直接根據顏色分配相應的類名。

另一個選項是在JS中以編程方式更改顏色，以響應相應的鼠標事件。

聽起來你想做這樣的事情:

.service__icon:hover {
background-color: #desiredColor!important;
}

但是請注意，內聯樣式和！重要不被認為是一個好的做法

實現這一點的一種可能方法是使用

onMouseOver onMouseOut

handleMouseOver() {
  this.setState({ bgColor: service.color })
}

handleMouseOut() {
    this.setState({ bgColor: service.color2 })
}