为什么我的react-bootstrap Button组件hover样式无法生效？

问题根因 #

你遇到的样式不生效问题核心是CSS优先级规则导致的冲突：

• 写在组件style属性里的内联样式优先级远高于普通类选择器（包含:hover伪类的类选择器），你给Button组件直接内联定义了fontSize、fontWeight、color属性，优先级更高的内联样式直接覆盖了.facsButton:hover里定义的同名样式，所以hover状态看不到变化。
• 额外小细节：你当前定义的hover样式和默认样式的color值完全一致，就算样式生效颜色也不会有视觉变化，如果需要颜色变化可以调整hover状态下的color值。

解决方案 #

方案1（推荐）：把默认样式从内联移到CSS类定义中 #

移除所有Button组件上的style属性，把默认样式写在.facsButton的基础规则里：

/* 基础默认样式 */
.facsButton {
    font-size: 32px;
    font-weight: 500;
    color: #10255A;
}
/* hover状态样式 */
.facsButton:hover{
    font-size: 40px;
    font-weight: 600;
    /* 可按需调整为不同的颜色值 */
    color: #10255A;
}

方案2（应急可选）：给hover样式加!important提升优先级 #

如果暂时不方便修改内联样式，可以通过!important强制提升hover样式的优先级：

.facsButton:hover{
    font-size: 40px !important;
    font-weight: 600 !important;
    color: #10255A !important;
}

注意该方法会破坏原生优先级规则，非必要不建议长期使用。

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