How do I add custom CSS to a PrimeVue component that has its own built in CSS?

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>

Found this answer in the PrimeVue Discord.

In the styling section of the documentation, it has the built in css classes. I can access these for this specific p-dialog if used in my wrapper class as seen below:

.deletion-dialog {
  ...
  ...
  .p-dialog-header {
    ...
    ...
  }
}