Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
Eu faria assim também, mas às vezes o Bootstrap tem regras específicas que precisam de maior peso. Nesse caso, usar !important às vezes ajuda, mas não é ideal.
Boa dica, mas cuidado ao aplicar estilos globais. Aqui no meu time, criamos classes específicas pra não afetar outros componentes.
Exato, e na hora de teste, só não esquecer de conferir se o CSS não tá sendo sobrescrito por alguma outra regra mais específica.
Sim, e às vezes rola de usar styled components ou emotion pra fazer isso de forma mais controlada. Assim evita conflito de estilos.