Search code examples
vue.jsvuejs2vuetify.jsv-navigation-drawer

How to remove border next to v-navigation-drawer

I made a navigation drawer WITHOUT borders but a thin line on the left just can't seem to go away. I tried doing a border : none to remove any border around the component, it won't work.

I also tried inspecting the element, and the problem is a <div class="v-navigation-drawer__border"></div> so I tried removing it by calling it in the CSS but it's still there. I even added the !important propriety.

Does anyone know how to remove a border next to a v-navigation-border ? What it looks like

Solution

  • You have to use a deep selector for scoped CSS to select inner elements of components.

    <style scoped>
.v-navigation-drawer >>> .v-navigation-drawer__border {
  display: none
}
</style>