styling bootstrap-vue dropdown button

Question

I have this dropdown menu with bootstrap-vue in my nuxtjs app:

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

I want to be able to change the border and background color of my dropdown button through this code:

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

Please note that the style MUST be scoped. What am I doing wrong and how can I change style of my dropdown button?

Answer 1

You can use toggle-class to assign a scoped CSS class to your dropdown toggle button and variant='none' to disable the default variant in effect when the toggle button is clicked.

Template

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

Sample result: