Como remover a linha sublinhada de links no React com Bootstrap

No React com Bootstrap, remover a linha de sublinhado padrão dos links às vezes dá mais trabalho do que parece, pois muitas vezes usamos classes ou estilos inline que acabam não surtindo efeito. A solução geralmente passa por customizar o CSS, mas nem sempre é óbvio como fazer isso na prática.

No caso do Bootstrap, a classe padrão para links é 'a', que vem com o estilo de underline. Para remover, uma alternativa eficiente é usar a propriedade text-decoration: none. no CSS aplicado ao seu link.

Por exemplo, você pode criar uma classe customizada:

.sem-underline {
  text-decoration: none. }

E aplicar no seu componente:

<Link className="sem-underline" to={`/panelmember/${item._id}`}>...</Link>

Se estiver usando react-bootstrap, também vale checar se há alguma configuração específica na documentação, embora na maioria das vezes o CSS padrão resolve. O que vocês fazem pra evitar esses estilos padrão do Bootstrap que atrapalham o design? O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta.