如何更改下拉按钮的背景颜色（Vue Bootstrap）

Posted 2023-02-22

【中文标题】如何更改下拉按钮的背景颜色（Vue Bootstrap）

【英文标题】：How to change background color of dropdown button (Vue Bootstrap)

【发布时间】：2021-08-25 13:15:49

【问题描述】：

我无法以任何方式更改下拉按钮的背景颜色。我已经尝试过使用 ID，删除它的类并编写我自己的类并使用 !important 进行覆盖，但背景颜色没有改变。 该按钮实际上并不存在于代码中。但它以“.btn-secondary”类出现在 DOM 中。

请提出改变它的方法。我想要这个颜色：-

.btn-secondary 
    background-color: #ff3838;

这是链接：-

https://jsfiddle.net/94quwf6r/2/

【问题讨论】：

您应该使用variant，如official documentation中所述

另外，您可以通过将类名传递给toggle-class 属性来将自定义类添加到切换按钮本身。然后您可以将所需的样式添加到该类中，这是比编辑原始主题值更好的解决方案。

@Chin.Udara 如果他想更新原始的 BS 主题，这可能会很有用，但确实有更好的方法来实现这一点。

【参考方案1】：

到目前为止工作得很好。不要忘记按页面左上角的Run 以便它考虑您的更改（它不是自动刷新）。

【讨论】：

确保将scoped属性添加到css部分，否则这将影响引导程序本身设置的原始btn-secondary主题。

@Chin.Udara 在这一点上，如果他正在做一个快速的 VueJS 接线，我不确定他是否过于关注 CSS 范围。你真的能做到吗？

你可能无法做出小提琴风格scoped。我只是指出来。

仍然无法处理我的实际项目。在我的实际项目中，有一个 Header 组件，其中有这个下拉按钮。我已将 Header 样式设置为范围。现在，即使我用“.btn-secondary”覆盖，它也不会发生。但是当我删除“作用域”时，它就会被覆盖（但那是主要的 .btn-secondary 类，可能不想要那个）。如何通过“范围”实现它？？

@ZaeemKhaliq 你使用 CSS 还是 SASS？如果您确实使用常规 CSS，>>> .btn-secondary 应该就足够了。如果使用 SASS，请使用 ::v-deep .btn-secondary。在这两种情况下都保留scoped。更多细节在这里：***.com/a/55368933/8816585