不知道你有沒有發(fā)現(xiàn)拣宏，在 React 中是無法給行內(nèi)樣式添加 !important 權(quán)重的沈贝。
// not worked
export default function App() {
return (
<div className="app" style={{ fontSize: '30px !important' }} >
React App
</div>
)
}
如果非要用，可以用 Callback Refs 處理勋乾，比如：
// worked
export default function App() {
return (
<div
className="app"
ref={el => el && el.style.setProperty('font-size', '30px', 'important')}
>
React App
</div>
)
}
相關(guān)討論可看：
To be fair, the ref solution doesn’t help for server rendering. Again, if you have a particular API proposal, sending an RFC would be a better place to discuss it. Thank you! commented by dan
為什么 React 不支持呢宋下？
首先，這需求的實現(xiàn)是沒有任何技術(shù)難度的辑莫。但 React 為什么不做呢杨凑，個人猜測可能是開發(fā)者濫用 !important 處理樣式樣式優(yōu)先級。雖說如此摆昧，但理應(yīng)支持撩满，總會遇到「用魔法打敗魔法」的場景的。
關(guān)于 !important 的一些看法：
當(dāng)在一個樣式聲明中使用一個 !important 規(guī)則時绅你，此聲明將覆蓋任何其他聲明伺帘。雖然，從技術(shù)上講忌锯，!important 與優(yōu)先級無關(guān)伪嫁，但它與最終的結(jié)果直接相關(guān)。使用 !important 是一個壞習(xí)慣偶垮，應(yīng)該盡量避免张咳，因為這破壞了樣式表中的固有的級聯(lián)規(guī)則 使得調(diào)試找 bug 變得更加困難了帝洪。當(dāng)兩條相互沖突的帶有 !important 規(guī)則的聲明被應(yīng)用到相同的元素上時，擁有更大優(yōu)先級的聲明將會被采用脚猾。
一些經(jīng)驗法則：
- 一定要優(yōu)先考慮使用樣式規(guī)則的優(yōu)先級來解決問題而不是
!important- 只有在需要覆蓋全站或外部 CSS 的特定頁面中使用
!important- 永遠不要在你的插件中使用
!important- 永遠不要在全站范圍的 CSS 代碼中使用
!important- 與其使用
!important葱峡，你可以：
- 更好地利用 CSS 級聯(lián)屬性
- 使用更具體的規(guī)則。在您選擇的元素之前龙助，增加一個或多個其他元素砰奕，使選擇器變得更加具體，并獲得更高的優(yōu)先級提鸟。
- 對于（2）的一種特殊情況军援，當(dāng)您無其他要指定的內(nèi)容時，請復(fù)制簡單的選擇器以增加特異性称勋。
以上摘自 MDN胸哥。
