I am trying to make a custom dialog popup with PrimeVue < p-dialog >. But I can't seem to get around the CSS that comes with it; I want to use my own and just keep the functionality.
I haven't been able to find any resources online. I know I'm understanding something wrong but I don't know what. Here's the documentation:
https://www.primefaces.org/primevue/#/dialog
This is my Vue code. I added a custom CSS class but it just comes out all wonky. So that's why I feel like I need to get it to ignore all the other code that comes with the PrimeVue library. It's just looking like the 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 this is the CSS
<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>
To customize the appearance of the p-dialog component from PrimeVue while maintaining its functionality, you can use a feature in PrimeVue called "Pass Through" to override or add classes and styles to the components.
More information here: https://primevue.org/passthrough/