johndatserakis/vue-simple-context-menu

problems overriding default CSS

slieb opened this issue · 6 comments

slieb commented

I may be doing something wrong, but I'm having problems overriding the CSS styles. Everything working fine with the code, but I have the following in my project's home.css file, and the items in bold are not being reflected, but return to your defaults. I've tried this without the [data-v-a99b4df2] as well, but no luck. I'm sure it's something simple, but stumped.

Thanks.

.vue-simple-context-menu__item[data-v-a99b4df2] {
padding: 0px 10px 0px 5px;
background-color: lightblue;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: italic;
}
.vue-simple-context-menu li[data-v-a99b4df2]:first-of-type {
margin-top: 0px;
}
.vue-simple-context-menu li[data-v-a99b4df2]:last-of-type {
margin-bottom: 0px;
}

johndatserakis commented

Hey bud - no that's my fault. I've removed the scoped property on the component and rebuilt. It is now updated at v3.1.0 - so update your dependency.

The way I had it before made it tougher than it should be to overwrite the styles.

Now you should be able to do like what you have above - except you don't need to include the [data-v-a99b4df2] portion - just something like below:

.vue-simple-context-menu__item {
    background-color: lightblue;
}

or like this if you're using scss.

.vue-simple-context-menu {
    &__item {
        background-color: lightblue;
    }
}

And it'll work. Let me know if that gets you going.

slieb commented
johndatserakis commented

Before I debug further - can you delete your package-lock.json, confirm the 3.1.0 in the package.json, delete your node_modules folder, and run npm i again?

Just want to make sure there's no trace of the old dep. Thanks.

slieb commented
slieb commented
johndatserakis commented

No sweat - glad you got it working! Thank you.