I'm struggling to create a customized dialog popup using PrimeVue's < p-dialog > component. I can't figure out how to override the default CSS styles that come with it; I want to use my own styles while keeping the functionality intact.
Despite my efforts, I haven't been able to find any helpful resources online. I feel like there's something I'm missing, but I can't pinpoint what it is. You can check out the documentation here:
https://www.primefaces.org/primevue/#/dialog
Below is the Vue code I've written. I tried adding a custom CSS class, but the output is not as expected. It seems like I need to somehow isolate my styles from the default PrimeVue library styles, as the dialog is still rendering similar to other p-dialogs within this file.
<p-dialog v-model:visible="confirmationDialog" :closable="false" class="delete-dialog">
<div>
<span>{{ $t('title') }}</span>
</div>
<div>
<span>{{ $t('body') }}</span>
</div>
<p-button
class="p-button-text"
@click="
confirmationDialog = !confirmationDialog;
"
>{{ $t('close') }}</p-button
>
<p-button
class="p-button-text"
@click="
confirmationDialog = !confirmationDialog;
delete();
"
>{{ $t('delete') }}</p-button
>
</p-dialog>
And here are the CSS styles I'm trying to apply:
<style lang="scss">
.deletion-dialog {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 0px;
position: relative;
width: 312px;
height: 289px;
background: #ffdad4;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 28px;
.deletion-dialog-text {
padding: 0px;
background: #ffdad4;
}
}
.deletion-header {
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 0px;
position: relative;
width: 312px;
height: 289px;
}
</style>