How can I change the background color of an item when hovering?

[Harry Li]

As per the title, I haven't found a way to solve this. I have tried the following on the vue component:

.v-sidebar-menu.vsm_white-theme.vsm_collapsed .vsm--link_level-1.vsm--link_hover .vsm--icon {
    background-color: #24292f !important;
}

which doesn't work.

Also, trying to change the vars in the _variable.scss doesn't work.

Last, any insights that I can change the theme variables would be appreciated. I have gone over the instruction but still don't know where I should put the following line for example:

$primary-color: #24292f !default;
@import "vue-sidebar-menu/src/scss/vue-sidebar-menu.scss";

if I just want to change the primary color.

[yaminncco]

The selector is .vsm--mobile-bg
For the theme you can import it in the main.js file

[Harry Li]

Interesting, I don't think both approaches can work on my end.

The first thing I tried was to write the following code on the component using the vue-sidebar-menu:

This doesn't work.

Another thing was overriding the variables in the main.js:

Is there anything I should change to make it work?

[yaminncco]

First doesn't work cause style has scoped attribute, and to override with css try to use a more specific selector.

<style lang="scss">
.app .v-sidebar-menu .vsm--mobile-bg {
  background-color: red;
}
</style>

For the second issue you need to import vue-sidebar-menu/src/scss/vue-sidebar-menu.scss after overriding the variables.

$primary-color: red;
@import "vue-sidebar-menu/src/scss/vue-sidebar-menu.scss";

And you don't need to import the css file.

[Harry Li]

The second finally works! Thanks!