javascript - 样式化 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 类分配给下拉切换按钮，并 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>

示例结果: