I've been working on styling the content of the Vuetify dialog component and have been using the content-class prop along with scoped styles to achieve this. Can someone explain the difference between the styles provided below? And also, any tips on how to make the SCSS version work correctly? Check out the Codesandbox for reference.
<style lang="css" scoped>
.dialog-content {
outline: 5px solid black;
}
</style>
<style lang="scss" scoped>
::v-deep .dialog-content {
outline: 5px solid black;
}
</style>
<template>
<v-dialog v-model="dialog" content-class="dialog-content">
// ....
</v-dialog>
</template>