How to modify Vuetify's auto-generated CSS

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.