如何覆盖 react-router-link 链接样式属性？答案

【问题标题】：How to override react-router-link Link style properties?如何覆盖 react-router-link 链接样式属性？
【发布时间】：2020-07-04 04:36:21
【问题描述】：

我正在尝试简单地更改应用中每个显示链接的颜色：

如您所见，默认颜色为蓝色。
由于链接取决于 html a标签，我去了这个App.scss文件并试图覆盖它：

App.scss

// Styles
// Customizing link color
a {
  color: #fff;
}
a:hover {
  color: rgb(109, 5, 5);
}
// CoreUI Icons Set
@import "~@coreui/icons/css/coreui-icons.css";
// Import Flag Icons Set
@import "~flag-icon-css/css/flag-icon.min.css";
// Import Font Awesome Icons Set
@import "~font-awesome/css/font-awesome.min.css";
// Import Simple Line Icons Set
@import "~simple-line-icons/css/simple-line-icons.css";
// Import Main styles for this application
@import "./scss/style.scss";

但是，仍然没有任何改变。知道我做错了什么吗？

【问题讨论】：

您在更改后导入 scss/styles.scss。因此，您的更改需要在所有导入之后进行，即使您需要检查 specificity 覆盖任何应用样式的类
我没有得到特异性部分
developer.mozilla.org/en-US/docs/Web/CSS/Specificity
浏览器使用specificity 来决定如何应用样式。非常简单的例子：假设你有<a class='link' >。在 css 元素中的样式为 .link {color: red}。然后，即使您执行a {color: blue}，它也会保持红色，因为使用 class= 比元素标记更高的特异性。所以你必须在文件底部添加.link {color: blue} 使它变成蓝色。还有很多比这更多的，但这只是一个非常简单的例子

标签： html css reactjs sass react-router

【解决方案1】：

问题应该是你的加载顺序。

这里可能发生的是您正在设置

a {
  color: #fff;
}
a:hover {
  color: rgb(109, 5, 5);
}

然后，您正在导入可能在 a 和 a:hover 上具有 color 属性的样式，并且您的样式被覆盖。

在大多数情况下，您应该将导入放在文件的顶部，然后编写您的自定义代码/样式/其他任何内容。

【讨论】：