Styled Components中text-decoration失效：React Link下划线无法去除求助

嘿，我之前也碰到过一模一样的问题！核心原因是**@reach/router的Link组件最终会渲染成原生<a>标签**，而浏览器（或者你导入的Bootstrap）对<a>标签的不同状态（link/visited/hover/active）自带默认下划线样式。你的styled-components样式只覆盖了基础状态，没覆盖这些伪类状态，而行内样式的优先级更高，所以能直接生效。

下面给你两种可行的解决方案：

方案1：覆盖<a>标签所有状态的样式 #

直接在StyledLink里针对所有伪类状态设置text-decoration: none，确保完全覆盖浏览器和Bootstrap的默认样式：

import React from "react";
import styled from "styled-components";
import { Link } from "@reach/router";
import { CSSTransition, TransitionGroup } from "react-transition-group";

const StyleNavbarContainer = styled.nav` 
  background-color: #333333; 
  width: 100%; 
  color: #d6d6d6; 
  position: fixed; 
  text-align: center; 
  top: 0; 
`;
const AppleLogo = styled.div` 
  font-size: 20px; 
  display: inline-block; 
`;
const StyleLinkList = styled.ul` 
  display: inline-block; 
`;
// 修改此处：覆盖<a>标签所有状态的下划线样式
const StyledLink = styled(Link)` 
  padding: 12px 10px; 
  color: #d6d6d6; 
  text-decoration: none;

  &:link, &:visited, &:hover, &:active {
    text-decoration: none;
  }
`;

const Navbar = (props) => { 
  return ( 
    <> 
      <StyleNavbarContainer> 
        <AppleLogo> 
          <i className="fab fa-apple"></i> {/* 注意：React里类名要用className，不是class */}
        </AppleLogo> 
        <StyleLinkList> 
          <StyledLink to="/">Mac</StyledLink> 
        </StyleLinkList> 
      </StyleNavbarContainer> 
    </> 
  ); 
};
export default Navbar;

方案2：强制提高样式优先级（万不得已时用） #

如果方案1还是不生效，大概率是Bootstrap的样式优先级更高，可以用!important强制覆盖（尽量少用，优先方案1）：

const StyledLink = styled(Link)` 
  padding: 12px 10px; 
  color: #d6d6d6; 
  text-decoration: none !important;

  &:link, &:visited, &:hover, &:active {
    text-decoration: none !important;
  }
`;

另外提个小细节：你的代码里<i class="fab fa-apple"></i>要改成<i className="fab fa-apple"></i>，React中元素的类名属性是className，不是原生HTML的class哦～

内容的提问来源于stack exchange，提问作者nathannewyen