如何使用styled-components去除React Router中Link组件的默认样式

问题根源 #

你当前的去下划线样式仅作用在Link内部的p标签上，但React Router的Link组件最终会渲染为原生<a>标签，自带的下划线、默认蓝色等样式是作用在<a>标签本身的，内部子元素的样式无法覆盖父级<a>的默认规则，因此配置不生效。

方案一：封装Link为样式组件（推荐） #

直接用styled-components包裹Link组件，样式直接作用在渲染后的<a>标签上，无需多余嵌套。

修改后的MainElements.jsx代码： #

import styled from "styled-components";
import { Link } from "react-router-dom";

export const MainComponent = styled.div`
  width: 100%;
  height: 100vh;
  background-color: #1e2258;
`;

export const Menu = styled.div`
  display: flex;
  width: 80%;
  margin: auto;
  height: 10vh;
  color: #fff;
  border: 1px solid white;
  align-items: center;
  gap: 24px; // 可选：增加导航项间距
`;

// 直接基于Link创建样式组件，规则直接作用在渲染后的a标签上
export const HyperLink = styled(Link)`
  text-decoration: none;
  color: inherit; // 继承父级Menu的白色字体，无需单独写死色值

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

修改后的Main.jsx代码： #

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { MainComponent, Menu, HyperLink } from "./MainElements";
// 此处补充你自己的Crypto、MarketPlace组件导入
import Crypto from "./你的Crypto组件路径";
import MarketPlace from "./你的MarketPlace组件路径";

function Main() {
  return (
    <>
      <Router>
        <MainComponent>
          <Menu>
            {/* 直接使用封装好的带样式的HyperLink，无需嵌套原生Link和p标签 */}
            <HyperLink to="/crypto">Crypto</HyperLink>
            <HyperLink to="/marketplace">Market Place</HyperLink>
          </Menu>
          <Switch>
            <Route path="/crypto" component={Crypto} />
            <Route path="/marketplace" component={MarketPlace} />
          </Switch>
        </MainComponent>
      </Router>
    </>
  );
}

方案二：不修改原有DOM结构，全局清除Menu下的a标签样式 #

如果不想调整现有组件嵌套结构，只需给父容器Menu新增针对a标签的样式规则，覆盖所有内部Link渲染的a标签默认样式即可，原有Main.jsx代码完全不用改动。

仅需修改MainElements.jsx中的Menu样式： #

export const Menu = styled.div`
  display: flex;
  width: 80%;
  margin: auto;
  height: 10vh;
  color: #fff;
  border: 1px solid white;
  align-items: center;
  
  // 新增：覆盖内部所有a标签的默认样式
  a {
    text-decoration: none;
    color: inherit;
  }
  a:focus,
  a:hover,
  a:visited,
  a:link,
  a:active {
    text-decoration: none;
    color: inherit;
  }
`;

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