如何移除Vuetify v-dialog的box-shadow，自定义样式不生效如何解决

• scoped样式的作用域限制：Vue 会给所有scoped样式对应的DOM节点添加唯一的data-v-xxx自定义属性，样式选择器也会自动拼接该属性后缀，仅作用于当前组件内部的节点。而v-dialog的content-class对应的元素默认挂载在当前组件根节点之外，没有对应的data-v-xxx属性，因此你写的scoped样式无法匹配到该元素。
• 样式优先级问题：Vuetify 内置的.v-dialog样式优先级高于你自定义的div.vDialog选择器，就算匹配到元素也可能无法覆盖原生样式。

方案1（最推荐，无需额外写样式） #

直接使用Vuetify原生的elevation属性控制阴影层级，设置为0即可完全移除阴影，修改你的v-dialog代码即可：

<v-dialog
  v-model="assignedPRPaneldialog"
  width="700"
  elevation="0"
>

elevation属性的取值范围是0-24，对应不同高度的阴影效果，0就是无阴影。

方案2（使用自定义类+全局样式） #

把自定义的vDialog样式放到非scoped的全局样式文件中，比如项目公共的global.css、或者App.vue的无scoped标记的style块里：

.vDialog {
  box-shadow: none;
}

因为你给dialog加了唯一的自定义类，不会污染其他全局组件的样式。

方案3（保留scoped样式，使用深度选择器穿透） #

如果不想把样式放到全局，可以在scoped样式块中用深度选择器强制样式作用到子组件/外部挂载的元素：

Vue 2 写法： #

<style lang="scss" scoped>
/deep/ .vDialog {
  box-shadow: none;
}
</style>

Vue 3 写法： #

<style lang="scss" scoped>
:deep(.vDialog) {
  box-shadow: none;
}
</style>

如果以上写法仍然不生效，可以添加!important提升样式优先级：

:deep(.vDialog) {
  box-shadow: none !important;
}

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