如何消除React Router Link对CSS样式的影响？

Link组件本质是封装了原生<a>标签，浏览器对a标签有默认样式（比如默认蓝色文字、hover/focus状态变色、下划线等），只设置textDecoration: 'none'只能去掉下划线，其他默认样式还会影响布局，试试下面几种方案：

• 全局/局部CSS重置样式
  定义一个专门的重置类，覆盖a标签的所有默认样式：

  .link-reset {
    color: inherit; /* 完全继承父元素文字颜色 */
    text-decoration: none;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }
  /* 清除hover、焦点、激活状态的默认样式 */
  .link-reset:hover,
  .link-reset:focus,
  .link-reset:active {
    color: inherit;
    text-decoration: none;
    outline: none;
  }
  

  然后给Link组件加上这个类：

  <Link to={`/link/${item.id}`} className="link-reset">...</Link>
  

• 扩展内联样式
  如果不想额外写CSS类，直接把需要重置的样式都写到style属性里：

  <Link 
    to={`/link/${item.id}`}
    style={{
      textDecoration: 'none',
      color: 'inherit',
      background: 'transparent',
      border: 'none',
      padding: 0,
      margin: 0
    }}
  >...</Link>
  

• 用CSS-in-JS定制Link（比如styled-components）
  如果你项目里用了CSS-in-JS方案，可以直接封装一个无默认样式的Link组件：

  import styled from 'styled-components';
  import { Link } from 'react-router-dom';
  
  const PlainLink = styled(Link)`
    text-decoration: none;
    color: inherit;
    &:hover, &:focus, &:active {
      text-decoration: none;
      color: inherit;
      outline: none;
    }
  `;
  
  // 后续直接用PlainLink替代原生Link
  <PlainLink to={`/link/${item.id}`}>...</PlainLink>
  

核心思路就是完全覆盖原生a标签的所有默认样式，让Link组件完全继承父元素的样式，不再自带浏览器默认的a标签样式。

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