如何從反應中的錨標簽或鏈接標簽中刪除虛線？

Question

我目前正在使用 react-burger-menu 制作一個可以打開和關閉的側導航欄。 在導航欄內，內容被包裹在錨標簽周圍，使其成為一個鏈接，並且在其下方有一條虛線。 我嘗試了很多東西來擺脫虛線，但沒有成功。 下圖顯示了我所說的虛線。

a, a:active, a:focus {
   outline: none;
}

<Menu>
   <a href="#" className="menu-item"> 🏡 Home </a>

   <a className="menu-item" href="#"> 🍔 Burgers </a>

   <a className="menu-item" href="#"> 🍕 Pizzas </a>

   <a className="menu-item" href="#"> 🍦 Desserts </a>
</Menu>

我已經嘗試過像上面那樣的 css 樣式，但沒有任何區別。 我可以用來使虛線消失的任何想法或技巧。 提前致謝！

Answer 1

react-burger-menu不強制任何樣式，似乎這種虛線樣式是從其他地方繼承的，您應該使用text-decoration: none; 覆蓋虛線 styles，但我建議僅將這種樣式提供給菜單項以避免 css 全局 inheritance

<Menu className="my-menu">
   <a href="#" className="menu-item"> 🏡 Home </a>
   <a className="menu-item" href="#"> 🍔 Burgers </a>
   <a className="menu-item" href="#"> 🍕 Pizzas </a>
   <a className="menu-item" href="#"> 🍦 Desserts </a>
</Menu>

然后在 css 中，將樣式應用於此菜單項

.my-menu .menu-item {
    text-decoration: none;
    ...
}

您也可以嘗試使用style prop 在反應組件中內聯 css styles

<Menu className="my-menu">
   <a href="#" style={{ textDecoration: 'none !important' }}> 🏡 Home </a>
</Menu>

這並不實用，但卻是調試問題的好方法，並且在所有方面始終避免!important在您的 styles 中。