How to modify Vuetify's auto-generated CSS - vue.js

Question

What I'm Using
Vuetify 2.5.6
The Problem
I'm trying to disable an odious scroll bar
But can't quite figure out how to destroy it (and its ilk). Every suggestion I've tried still yields a Vuetify auto-generated class "v-navigation-drawer__content" that has overflow-y: auto;.
I'd like to learn how to modify the default behavior of these Vuetify-generated CSS files (for this issue and for future ones).
What I've Tried
I've tried:
adding style="overflow: hidden;" to the v-navigation-bar tag.
modifying adding .v-navigation-drawer__content { overflow: hidden !important } to the style section in the view component.
adding the following CSS and also adding mounted() and destroyed() hooks from this answer
Minimal Reproducible Example
<template>
<v-navigation-drawer
app
clipped
class="side-nav-bar"
permanent>
<v-menu
bottom
offset-y>
<template v-slot:activator="{ on, attrs }">
<v-list-item
two-line
v-bind="attrs"
v-on="on">
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title class="text-h6">Sandra Adams</v-list-item-title>
<v-list-item-subtitle>sandra_a88#gmail.com</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
<v-list>
<v-list-item
v-for="(workspace, i) in workspaces"
:key="i"
#click="changeWorkspaces(workspace)">
<v-list-item-title>{{ workspace.title }}</v-list-item-title>
</v-list-item>
<v-divider />
<v-list-item
#click="createNewWorkspace">
<v-list-item-title>Create Workspace</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-divider />
<v-list
nav
dense
v-for="(item, i) in sideNavOptions"
:key="i">
<v-list-item
v-if="!item.subList"
:key="item.title"
:to="item.link">
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title class="title-bold">{{ item.title }}</v-list-item-title>
</v-list-item>
<v-list-group
v-else
:key="item.title"
:prepend-icon="item.icon"
no-action>
<template v-slot:activator>
<v-list-item>
<v-list-item-content>
<v-list-item-title class="title-bold">{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<v-list-item
v-for="sublist in item.subList"
:to="sublist.link"
:key="sublist.title">
<v-list-item-title>{{ sublist.title }}</v-list-item-title>
</v-list-item>
</v-list-group>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
name: "SideNavBar",
data() {
return {
workspaces: [],
sideNavOptions:[
{ title: "Dashboard", icon: "mdi-monitor-dashboard", link: "/dashboard" },
{
title: "Workflow",
icon: "mdi-cog",
subList: [
{ title: "Inbox", link: "/workflows/inbox" },
{ title: "Action Required", link: "/workflows/action_required" },
{ title: "Waiting for Others", link: "/workflows/waiting_for_others" },
{ title: "Approved", link: "/workflows/approved" },
{ title: "Sent", link: "/workflows/sent" },
{ title: "Completed", link: "/workflows/completed" },
]
},
{
title: "Templates",
icon: "mdi-cog",
subList: [
{ title: "Placeholder", link: "/templates/placeholder" }
]
},
{
title: "Contacts",
icon: "mdi-cog",
subList: [
{ title: "Placeholder", link: "/contacts/placeholder" }
]
},
{
title: "Settings",
icon: "mdi-cog",
subList: [
{ title: "Workspace Settings", link: "/settings/workspace" },
{ title: "Company Settings", link: "/settings/company" },
{ title: "Department Settings", link: "/settings/department" }
]
},
{ title: "Reminders", icon: "mdi-cog", link: "/reminders" }
]
}
},
async beforeMount() {
await this.getUserWorkspaces()
},
methods: {
changeWorkspaces(workspace) {
console.log(workspace)
},
createNewWorkspace() {
console.log("Creating new workspace")
},
async getUserWorkspaces() {
console.log("Getting user workspaces")
this.workspaces = [ { title: "Placeholder_1" }, { title: "Placeholder_2" } ]
}
}
}
</script>
<style lang="sass" scoped>
.side-nav-bar {
overflow: hidden !important;
color: $white !important;
background: $light_gray !important;
}
.v-navigation-drawer.v-navigation-drawer__content {
overflow: hidden !important;
}
</style>
Thanks in advance for any help!

Answer 1

Adding .v-navigation-drawer__content { overflow: hidden !important } should work but it's not working, because you are trying to change the style of a component which not a part of your current component using scoped css.
Try to remove scoped from your <style> and it will work. I usually create a global stylesheet and add it in App.vue file and make changes in that file.
Read more here about the scoped feature.