覆盖 vuetify 对话框的溢出属性答案

【问题标题】：Overriding the overflow property of a vuetify dialog覆盖 vuetify 对话框的溢出属性
【发布时间】：2021-01-03 23:26:19
【问题描述】：

简单的问题：我希望一个浮动操作按钮位于对话框的右上角，溢出，因此它与对话框有一点偏移。 v-dialog 有'overflow-y: hidden'，无论我如何尝试，我都无法覆盖它。

<v-dialog max-width="450">
  <div style="width: 200px; heigth: 200px;" >
    <v-btn fab absolute top right>
      <v-icon>
        mdi-close
      </v-icon>
    </v-btn>
  </div>
</v-dialog>

我尝试在 !important 中使用一些样式：

.show-overflow {
  overflow: visible !important;
}

我尝试在

中直接使用 'style="overflow:visible"' 来设置样式

如果我关闭溢出：使用 chrome 的 devtool 从 v-dialog 中隐藏，我会得到我想要的确切结果，但我没有找到任何方法。

谁有办法？

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

好的，所以我找到了执行此操作的方法。基本上，使用 Vue 的深层 CSS 选择器是正确的方法。

只需要按照我的组件的样式来做：

<style scoped>
  >>> .v-dialog {
    overflow-y: visible;
  }
</style>

“>>>”是关键，因为它“深度”覆盖了 .v-dialog 类的样式。在作用域样式中使用它可以使其不会破坏其他地方的 v-dialog。

【讨论】：