React悬停按钮实现疑问：如何为Bootstrap风格按钮添加悬停效果

你当前的按钮组件没出现悬停效果，核心原因是没有添加Bootstrap按钮的基础类.btn——Bootstrap的按钮悬停、点击等交互样式都是基于.btn类定义的，只加bg-dark和text-white这类工具类，不会触发悬停样式。

下面给你两种可行的解决办法：

方法一：复用Bootstrap自带的按钮样式 #

直接在colorStyle里加上.btn类，也可以用Bootstrap预设的按钮变体类（比如btn-dark）简化写法：

// 组件引入时修改为
<Button title="Shop" colorStyle="btn btn-dark" />

这样Bootstrap会自动给按钮加上预设的悬停、活跃状态样式，不用额外写CSS。如果一定要自己组合背景和文字颜色，也可以这么写：

<Button title="Shop" colorStyle="btn bg-dark text-white" />

方法二：自定义悬停CSS样式 #

如果不想用Bootstrap的.btn基础样式，完全自己控制悬停效果，可以在button.css里添加自定义的:hover样式：

/* button.css */
.bg-dark.text-white:hover {
  background-color: #121212; /* 自定义悬停时的背景色 */
  color: #ffffff;
  transition: background-color 0.3s ease; /* 添加过渡动画更自然 */
  cursor: pointer;
}

如果样式被Bootstrap的其他规则覆盖，可以给样式加上!important提升优先级：

.bg-dark.text-white:hover {
  background-color: #121212 !important;
  /* 其他样式 */
}

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