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

Question

在我的流星应用程序中，我尝试将 bootstrap 4.5 .btn-warning 和 .btn-success 按钮的颜色更改为其他颜色。但是我应用于 main.css 文件的 none 样式可以正常工作，而同一 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}

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

Changing styles of bootstrap .btn-success and .btn-warning buttons not working in Meteor

css

meteor

bootstrap-4