css - 覆盖 vuetify 对话框的溢出属性

Question

简单的问题:我想要一个 float 操作按钮位于对话框的右上角，溢出，因此它与对话框有一点偏移。 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"'

如果我关闭 overflow: hidden from the v-dialog using chrome's devtool 我得到了我想要的确切结果，但我没有找到任何方法。

谁有解决方案？

Answer 1

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

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

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

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