激活v-text-field时上方出现阴影的问题求助

问题情况 #

将v-text-field嵌套在v-menu的activator插槽中时，点击输入框进入激活状态，标题「Next Due」后方的顶部区域会出现阴影/模糊暗区，通过元素检查确认该阴影位于输入框的padding区域。但相同代码在其他组件中运行正常，怀疑是样式冲突或框架小bug导致。

组件代码：

<template>
  <v-card class="mx-4 my-8 px-4">
    <v-row>
      <v-col cols="6">
        <v-menu>
          <template v-slot:activator="{on}">
            <v-text-field v-on="on" label="Next Due"></v-text-field> 
          </template>
        </v-menu>
      </v-col>
    </v-row>
  </v-card>
</template>

<script>
export default {
  name: 'EditScheduledEmailReport',
  data() {
    return {}
  },
}
</script>

状态截图 #

• 正常状态（无阴影）：
  
• 激活状态（有阴影）：
  
• 元素检查结果：
  

解决思路 #

1. 直接覆盖激活状态的内阴影 #

从元素检查结果来看，该阴影是输入框激活时自带的box-shadow样式导致，直接通过CSS覆盖即可：

• 若组件使用了scoped样式，需添加深度选择器：

<style scoped>
::v-deep .v-text-field--outlined.v-input--is-focused .v-input__control .v-input__slot {
  box-shadow: none !important;
}
</style>

• 若未启用scoped，直接编写全局样式：

.v-text-field--outlined.v-input--is-focused .v-input__control .v-input__slot {
  box-shadow: none !important;
}

2. 排查父组件/全局样式冲突 #

由于相同代码在其他组件中正常，大概率是当前页面的父组件或全局样式存在冲突——比如父元素添加的backdrop-filter、filter或自定义box-shadow影响了输入框。可以临时移除父组件的自定义样式，逐步定位冲突来源。

3. 升级Vuetify版本 #

如果上述方法无效，可能是Vuetify版本存在bug，尝试升级到最新稳定版，这类视觉小问题通常会在后续版本中被修复。

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