React+Bootstrap项目中如何给链接设置全状态不变的可变CSS颜色？

问题原因 #

你仅为链接的:link基础状态设置了样式，未覆盖hover、visited、active、focus等所有交互状态，Bootstrap默认给这些交互状态设置的蓝色样式优先级高于你定义的.black/.white类，因此会出现悬停变色的问题。

解决方案 #

修改你的CSS样式如下即可，原有JSX的类名写法无需改动：

:root{
  --black: #3B424C;
  --white: #FFFFFF;
}

.black{
  color: var(--black);
}

.white{
  color: var(--white);
}

/* 覆盖链接所有交互状态的样式 */
.custom-hyperlink:link,
.custom-hyperlink:visited,
.custom-hyperlink:hover,
.custom-hyperlink:active,
.custom-hyperlink:focus {
  text-decoration: none;
  font-weight: bold;
  /* 继承当前元素的颜色，也就是你设置的black/white类的颜色 */
  color: inherit;
  /* 可选：去掉聚焦状态下的默认外轮廓 */
  outline: none;
}

如果遇到样式优先级不够仍然被Bootstrap覆盖的情况，可以把选择器调整为a.custom-hyperlink:link、a.custom-hyperlink:visited的形式，提升选择器优先级即可。

内容的提问来源于stack exchange，提问作者Josué Venegas