覆盖 vuetify 对话框的溢出属性

Question

简单的问题：我想要一个浮动操作按钮位于对话框的右上角，溢出，因此它与对话框有一点偏移。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 的开发工具关闭 v-dialog 中的溢出：隐藏，我会得到我想要的确切结果，但我没有找到任何方法。

有人有解决办法吗？

Answer 1

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

只需要按照我的组件的样式执行此操作：

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

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