样式化 bootstrap-vue 下拉按钮

Question

我的 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>

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

Answer 1

您可以使用toggle-class将作用域 CSS class 分配给下拉切换按钮，并使用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>

样本结果：