How to overrule b-dropdown classes in .vue component?

Hello!

I would like to overrule the border and caret of a b-dropdown classes within a component. In Chrome-developer I see the .btn-secondary class from which I can alter for example color or border. In my code I use for example but it has no effect. What am I doing wrong?

When I put this code in App.vue it works…

<style scoped>
.btn-secondary {
    color: red;
    border-color: yellow;
}
</style>

[tmorehouse]

It is basic cascading styles (CSS)

Add a class to your b-dropdown component (i.e. ‘<b-dropdown class=“my-dropdown” … >’),

Then target the inner parts as such with your style overrides:

.my-dropdown .dropdown-menu { /* some styles here */ }
.my-dropdown .dropdown-menu .dropdown-item { /* some styes here */ }
.my-dropdown > button { /* some styles here */ }

[emanuelmutschlechner]

Scoped styles won’t work in BV components