如何修改React Bootstrap下拉菜单点击后的高亮颜色？

点击Dropdown菜单选项时出现的蓝色高亮是Bootstrap默认的:hover/:focus样式，官方文档里没有直接的Props可以修改，你需要通过自定义CSS来覆盖默认样式。下面是两种简单的实现方式：

方法一：直接用CSS覆盖（适合初学者） #

在你的项目CSS文件中添加以下代码，替换成你想要的颜色即可：

/* 深色菜单下的选项悬停/聚焦高亮 */
.dropdown-menu-dark .dropdown-item:focus,
.dropdown-menu-dark .dropdown-item:hover {
  background-color: #2b3035; /* 示例深灰色，可替换为任意颜色值 */
}

/* 如果需要修改带active属性的选项背景色 */
.dropdown-menu-dark .dropdown-item.active {
  background-color: #3d444a;
}

如果是浅色菜单（未设置variant="dark"），去掉选择器里的-dark后缀：

.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover {
  background-color: #f0f0f0;
}

方法二：用SASS修改Bootstrap变量（进阶） #

如果你的项目使用了Bootstrap的SASS版本，可以直接修改内置变量来全局替换样式，避免重复写CSS：

// 先定义自定义颜色
$dropdown-dark-link-hover-bg: #2b3035;
$dropdown-dark-link-active-bg: #3d444a;

// 再导入Bootstrap的SASS文件
@import "bootstrap/scss/bootstrap";

将你的组件代码和上述CSS/SASS结合，就能替换掉默认的蓝色高亮效果。

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