样式化 bootstrap-vue 下拉按钮答案

【问题标题】：styling bootstrap-vue dropdown button样式化 bootstrap-vue 下拉按钮
【发布时间】：2021-06-20 19:36:05
【问题描述】：

我的 nuxtjs 应用中有这个带有 bootstrap-vue 的下拉菜单：

<div>
  <b-dropdown class="dropdown" id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Active action</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

我希望能够通过以下代码更改下拉按钮的边框和背景颜色：

<style scoped>
  .dropdown {
    border: solid 0px;
    background: white;
  }
</style>

请注意，样式必须有范围。我做错了什么，如何更改下拉按钮的样式？

【问题讨论】：

您是否在浏览器中查看了应用了哪些样式以及从何处应用？
是的，所以在浏览器上，class="dropdown" 有一个 <button> 子代，它具有样式，可以通过浏览器进行修改，但我不知道如何通过我的代码访问和修改它！

标签： javascript html css vue.js bootstrap-vue

【解决方案1】：

您可以使用toggle-class 为下拉切换按钮分配一个作用域 CSS 类，并使用variant='none' 禁用在单击切换按钮时生效的默认变体。

模板

<b-dropdown toggle-class='customDropdown' variant='none' class="m-md-2" id="dropdown-1" text="Dropdown Button">
  <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Active action</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>

CSS

<style scoped>
  .customDropdown {
    border: 3px dashed cyan;
    background-color: purple;
  }
</style>

示例结果：

【讨论】：