如何在移动端和桌面端移除Vuetify v-slide-group的箭头

已知show-arrows属性仅能在移动端隐藏箭头，桌面端无效。已设置:show-arrows="false"，也尝试过CSS设置.v-slide-group__next、.v-slide-group__prev为display: none !important，但均无效果，求其他解决办法。

代码示例：

<template>
        <v-container>
            <v-row>
                <v-col cols="6" class="pa-10">
                    <v-row>
                        <v-carousel v-model="imgModel" :show-arrows="false" hide-delimiters class="rounded-lg mb-5">
                            <v-carousel-item v-for="(item,index) in data" :key="index"
                                :src="item['src']"
                                aspect-ratio = "1" cover>
                            </v-carousel-item>
                        </v-carousel>
                    </v-row>
                    <v-row>
                        <v-slide-group
                        v-model="imgModel"
                        center-active
                        mandatory
                        :show-arrows = "false"
                        >
                            <v-slide-group-item
                                v-for="(item,n) in data"
                                :key="n"
                                v-slot="{ isSelected, toggle }"
                            >
                                <v-img width="100" cover class="rounded-lg mx-1" :src="item.src" @click="toggle() ; updateImg(item);"></v-img>
                            </v-slide-group-item>
                        </v-slide-group>
                    </v-row>
                </v-col>
                <v-col cols="6" class="pa-10">
                    
                </v-col>
            </v-row>
        </v-container>
</template>

• 适配Vuetify 3版本：3.x版本中v-slide-group的箭头控制属性已从show-arrows改为show-controls，将代码里的:show-arrows="false"替换成:show-controls="false"，即可同时隐藏移动端和桌面端的箭头，无需额外CSS。
• 样式穿透强制隐藏（兼容Vuetify 2/3）：如果组件样式被Vue作用域隔离导致常规CSS不生效，使用样式穿透语法：
  • Vue 2项目用>>>：

    >>> .v-slide-group__next,
    >>> .v-slide-group__prev {
      display: none !important;
    }
    

  • Vue 3项目用:deep()：

    :deep(.v-slide-group__next),
    :deep(.v-slide-group__prev) {
      display: none !important;
    }
    

• 核对箭头元素实际类名：打开浏览器开发者工具查看箭头元素的真实类名——不同Vuetify版本类名可能有变化，比如3.x中箭头类名可能是.v-slide-group-controls__prev和.v-slide-group-controls__next，找到正确类名后编写CSS即可生效。

内容的提问来源于stack exchange，提问作者Qiuzman