Блог

Я пытаюсь, чтобы целый раздел страницы действовал как ссылка на другую страницу, но я не хочу, чтобы раздел выделялся синим цветом, когда пользователь наводит на него курсор. Независимо от того, что я делаю, это выделяется при наведении.
JS

 
import { NavLink } from "react-router-dom";
<NavLink to="/application" className="nohighlight">
          <h1 className="puppytitle">
           Get your own puppy 
           
          </h1>
        </NavLink>
  

CSS

Я думал, что использование !important похоже на базовую опцию для css, но даже это не работает.

 .nohighlight {
text-emphasis: none;
text-decoration: none;
}
.nohightlight:hover {
  text-decoration: none !important;
}
  

Заранее благодарю вас.

Похоже, все, что вам нужно было сделать, это определить цвет текста. Вот пример:

 import React from "react";
import { BrowserRouter as Router, NavLink } from "react-router-dom";
import styled from 'styled-components';

export default function App() {
  return (
    <div>
      <h1>Hello CodeSandbox</h1>
      <Router>
          <StyledNavLink to='www.google.ca'>testing</StyledNavLink>
      </Router>
    </div>
  );
}

const StyledNavLink = styled(NavLink)`
  text-emphasis: none;
  text-decoration: none;
  color: black;
  amp;:hover {
    text-emphasis: none;
    text-decoration: none;
    color: black;
  }
`;
  

Код и поле: https://codesandbox.io/s/stack-63925598-navlink-color-gqop8