如何从反应中的锚标签或链接标签中删除虚线？

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 中。