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

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

/ / CSS

.navigation_bar > ul > li {
      list-style: none;
      display: inline;
      margin: 2%;
    }

    .link {
      text-decoration: none;
    }

.jsx

 <div className="navigation_bar">
            <ul key="nav">
              <li>
                <Link className="link" to="/">
                  Home
                </Link>
              </li>
            </ul>
          </div>

你可以在Link组件中添加style={{textDecoration: 'none'}}来删除下划线。你也可以在样式块中添加更多的css，例如style={{textDecoration: 'none'， color: 'white'}}。

<h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1> 

我认为在菜单项(和其他MaterialUI组件，如按钮)中使用react-router-dom链接的最好方法是在“组件”道具中传递链接

<Menu>
   <MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
   <MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>

你需要在“MenuItem”的“to”道具中传递路由路径(它将被传递给Link组件)。 这样你就不需要添加任何样式，因为它将使用MenuItem样式

添加css样式

a:link {
  text-decoration: none;
  color: #cc850a;
}

a:visited {
  text-decoration: none;
  color: #cc850a;
}

a:hover {
  text-decoration: none;
  color: #47a1ad;
}

a:active {
  text-decoration: none;
}

这很简单。只需在<Link>标签内添加style={{textDecoration: 'none'}}

<Link to="first" style={{ textDecoration: 'none' }}>
   <MenuItem style={{ paddingLeft: 13 }}>
         Team 1
   </MenuItem>