为什么我为react-bootstrap按钮编写的CSS样式没有生效？

• 确认CSS引入顺序：确保你的自定义样式文件的import语句，在react-bootstrap的全局样式import语句之后，后引入的样式优先级更高，可以覆盖先引入的react-bootstrap默认按钮样式。
• 提升自定义样式的优先级：把你的CSS选择器修改为.btn.btn-custom，叠加按钮默认的.btn类选择器提升权重，即可覆盖默认样式，修改后的CSS参考如下：

.btn.btn-custom{
    font-size: 21px;
    background-color: #10255A;
    padding: 8px 25px;
    color: white;
    border-radius: 5px;
}

• 排查CSS Modules配置：如果你的项目开启了CSS Modules，直接编写的.btn-custom会被编译为带哈希后缀的局部类名，和组件上实际生成的全局类名不匹配。你可以把自定义类名标记为全局样式：

:global(.btn-custom) {
  /* 原有样式内容 */
}

也可以放弃通过variant属性生成类名，直接给Button组件添加className属性，写法更稳妥：

<Button className="btn-custom" as={Link} to="/Room">
  See Room
</Button>

• 开发者工具快速排查：打开浏览器的元素检查工具，查看目标按钮元素上实际挂载的类名，同时看样式面板里你的自定义样式是否被划掉（被其他更高优先级样式覆盖），可以快速定位是类名不匹配还是优先级不足的问题。

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