你可以在你的scss文件中使用这段代码; 这将消除不需要的颜色变化，

a:-webkit-any-link {
  &:hover {
    color: white;
  }
}

核心方法在app。css(或对应版本)中

a{
  text-decoration: none;
}

这防止下划线为所有<a>标签，这是这个问题的根本原因

我发现这个问题，在一般情况下，没有一个答案真正解决了这个问题(例如，如果元素不是一个菜单项)。我建议:

import {useHistory} from "react-router-dom";
const MyComp = () => {
  const history = useHistory();
  return <div>
    <AnyComponent onclick={()=>history.push('/path/u/want')}
  </div>
}

还有另一种方法可以正确地删除链接的样式。你必须给它的textDecoration='inherit'和color='inherit'的风格，你可以添加这些作为样式的链接标签，如:

<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>

或者为了使它更通用，只需创建一个CSS类:

.text-link {
    color: inherit;
    text-decoration: inherit;
}

然后只需<Link className='text-link'>

现在是2023年，伪类得到了广泛的支持。因为菜单项呈现为<li>，我们可以这样定义一个css规则:

a:has(> li) {
  text-decoration: unset;
  color: unset;
}

这只修改具有<li>子元素的<a>元素。

如果有人正在寻找material-ui的链接组件。只需添加属性下划线并将其设置为none

<链接下划线= "没有" >…< /链接>