Vuetify 2.6.12：v-dialog内嵌v-data-table样式丢失问题求助

这个问题在Vuetify开发里挺常见的，根源就是v-dialog默认会挂载到body节点下，脱离了根组件的v-application上下文，导致内部的v-data-table继承不到必要的样式类。

给你几个实测好用的解决办法：

• 让v-dialog挂载到v-application内部
  利用Vuetify提供的attach属性，把对话框挂载到根应用的节点上，这样就能自动继承v-application和v-application--is-ltr这两个类。
  代码示例：

  <v-dialog attach=".v-application">
    <v-data-table :items="yourItems" :headers="yourHeaders"></v-data-table>
  </v-dialog>
  

  要是你的根应用用了自定义类名，把.v-application换成你实际的根容器选择器就行。

• 手动给v-dialog添加缺失的类
  直接在v-dialog组件上加上这两个类，强制注入样式上下文，简单直接：

  <v-dialog class="v-application v-application--is-ltr">
    <v-data-table :items="yourItems" :headers="yourHeaders"></v-data-table>
  </v-dialog>
  

  注意如果你的应用支持RTL（从右到左）布局，记得动态切换v-application--is-ltr为v-application--is-rtl。

• 用v-app包裹对话框内容
  在v-dialog内部套一层v-app组件，虽然能确保内部组件拿到完整样式上下文，但要注意多个v-app可能引发全局样式冲突，所以这个方法优先度不如前两个：

  <v-dialog>
    <v-app>
      <v-data-table :items="yourItems" :headers="yourHeaders"></v-data-table>
    </v-app>
  </v-dialog>
  

之前你试的v-row、v-container这些都是布局组件，它们本身不会传递根应用的样式类，所以解决不了这个问题。

内容的提问来源于stack exchange，提问作者Julian Nunes Artur