React 中的蓝色下划线文本 - 文本装饰：无； （和颜色）不起作用

Question

我是新手，正在努力更改文本颜色并从导航栏上的“链接”中删除下划线。 这是我的导航栏代码：

 render() { return ( 
    <nav class='items'>

<ul>
<Navitem item="Home" tolink="/"  activec={this.activeitem}></Navitem>
<Navitem item="About" tolink="/about"  activec={this.activeitem}></Navitem>
<Navitem item="Education" tolink="/education"  activec={this.activeitem}></Navitem>
<Navitem item="Skills" tolink="/skills"  activec={this.activeitem}></Navitem>
<Navitem item="Contact" tolink="/contact"  activec={this.activeitem}></Navitem>
</ul>
    </nav>   
     )

} 

这是我用于导航栏的 CSS：（如您所见，我尝试在几个地方更改颜色和文本装饰均无济于事。蓝色下划线和蓝色文本仍然存在！

 nav
{

padding:60px 30px 0px 30px ;
flex:var(--sidebar-flex);
background-image: url('../src/Images/cb.gif');
background-size: cover;
background-position: center;
/*background: rgb(255, 255, 255);*/
/*background: linear-gradient(180deg, rgb(255, 255, 255) 50%, rgba(132,124,252,1) 80%);*/
}

nav ul
{ 
  font-size:var(--fontsize-nav) ;
  text-align: center;
  list-style-type: none;
  text-decoration: none;
  color: black !important; 
}
nav ul li
{ margin:60px;
  margin-bottom: 80px;
  text-align: center;
  list-style-type: none;
  text-decoration: none;
  color: black !important; 
}

.Navitem
{
  text-decoration: none;
  color: black;
}

我还是新手，所以如果这是一个非常简单的解决方法，我深表歉意！非常感谢您提供的任何提示，如果需要更多信息，请告诉我。

谢谢！

Answer 1

使用文本装饰：无；在NavItem 组件生成的<a> 标签上。

例如

nav ul li a {
   text-decoration: none;
}