How to customize css for the group-label and group-values in vuejs multiselect optionGroup?

Question

I am working with optionGroup in vuejs multiselect. I am trying to make the group-label bold and group-value with padding-left, and also change the background color of group-label to a bit darker. But all the css i am trying to use is not working. Any help please. Thank you in advance

Answer 1

Try without using scoped in style since vue-multiselect is globally defined css and ` won't work on it.

<style>
.multiselect__option--group
{
 background:red !important;
 color:#35495e !important;
 font-weight: bold !important;
}
</style>

Answer 2

<style scoped>
.multiselect__option--group
{
  background:red !important;
  color:#35495e !important;
  font-weight: bold !important;
}
</style>

this is what i tried finally