更改引导 .btn-success 和 .btn-warning 按钮的样式在 Meteor 中不起作用

Question

在我的流星应用程序中，我尝试将 bootstrap 4.5 .btn-warning 和 .btn-success 按钮的颜色更改为其他颜色。但是我应用到 main.css 文件中的所有样式都不起作用，而同一 css 文件的其他元素上的样式正常工作。

这是我应用的样式：

.btn-success {
  color: #fff;
  background-color: #20ad00;
  border-color: #20ad00;
}

.btn-warning {
  color: #fff;
  background-color: #f36a02d1;
  border-color: #ffa04d;
}

虽然不工作，但我终于从浏览器控制台开发工具中复制了所有 .btn 和 .btn-success .btn-warning 样式，将类替换为 btn-success-sitename 和 btn-warning-sitename，并粘贴将样式分别复制到 myy css 文件中的新类。但我认为有更好的方法来做到这一点。

有什么建议吗？

Answer 1

所以要么按照 David 的建议为元素添加一个 id，然后为这些新的 ID 编写代码。它们将覆盖 boostrap 类中包含的样式 b/c ID 具有更高的特异性。

<button class="btn-success" id="custom-button-1">Click here</button>

然后在你的 CSS 中

#custom-button-1 {
background:blue}

否则，您可以尝试在样式语句的末尾添加 !important，它也应该覆盖 BS 样式，如下所示：

.btn-success {
background:blue!important}