How to remove border next to v-navigation-drawer-CodePudding

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 ></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

CodePudding user response：

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>

CodePudding user response：

https://vuetifyjs.com/en/api/v-navigation-drawer/#sass-navigation-drawer-border-width

According to the vuetify doc, you could set the variable #$navigation-drawer-border-width to 0

$navigation-drawer-border-width: 0