如何修改 Vuetify 的自动生成 CSS

Question

我在用什么

Vuetify 2.5.6

问题

我正在尝试禁用令人讨厌的滚动条

但不太清楚如何摧毁它（和它的同类）。我尝试过的每一个建议仍然会产生一个 Vuetify 自动生成的 class “v-navigation-drawer__content” 具有 overflow-y: auto;.

我想了解如何修改这些 Vuetify 生成的 CSS 文件的默认行为（对于这个问题和未来的问题）。

我试过的

我试过：

将 style="overflow: hidden;" 添加到 v-navigation-bar 标签。
修改在视图组件的样式部分添加.v-navigation-drawer__content { overflow: hidden !important }。
添加以下 CSS 并从此
添加 mounted() 和 destroyed() 挂钩

最小可重现示例

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

在此先感谢您的帮助！

Answer 1

添加 .v-navigation-drawer__content { overflow: hidden !important } 应该可以，但它不起作用，因为您正在尝试使用 scoped css.

更改不属于当前组件一部分的组件的样式

尝试从您的 <style> 中删除 scoped，它将起作用。我通常会创建一个全局样式表并将其添加到 App.vue 文件中并在该文件中进行更改。

阅读 here 关于 scoped 功能的更多信息。

如何修改 Vuetify 的自动生成 CSS

How to modify Vuetify's auto-generated CSS

vue.js

vuetify.js