Vuetify最新版本移除content-class后如何给v-dialog添加自定义样式？

• 方案1：使用content-props属性（官方推荐，改动最小）
  Vuetify 3 中移除了content-class属性，统一使用content-props向对话框内容容器传递属性，直接替换原有写法即可：

<v-dialog 
  v-model="loginUserDialog" 
  :content-props="{ class: 'loginmodalbox' }" 
  max-width="600px" 
  persistent
>
</v-dialog>

原有CSS样式不需要修改，可直接复用。如果样式写在带scoped的单文件组件style块中，需要添加深度选择器：

:deep(.loginmodalbox .modal-title) {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 8px;
}

• 方案2：通过父类选择器匹配内容容器
  如果不想修改组件属性，可以直接给v-dialog本身添加自定义类，再通过深度选择器匹配内部内容容器：

<v-dialog 
  v-model="loginUserDialog" 
  class="login-dialog-wrapper"
  max-width="600px" 
  persistent
>
</v-dialog>

对应CSS写法：

:deep(.login-dialog-wrapper .v-dialog__content .modal-title) {
  /* 原有样式规则 */
}

• 方案3：调整teleport挂载位置
  v-dialog默认会把内容挂载到全局body下，如果给组件添加attach属性指定挂载到当前组件内部的元素，就不需要使用深度选择器：

<v-dialog 
  v-model="loginUserDialog" 
  :content-props="{ class: 'loginmodalbox' }" 
  attach="#your-component-root-id"
  max-width="600px" 
  persistent
>
</v-dialog>

此时scoped样式块中的普通CSS规则即可生效，不需要加:deep()。

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