title: How do I add custom CSS to a PrimeVue component that has its own built in CSS?
body: <p>I am trying to make a custom dialog popup with PrimeVue &lt; p-dialog &gt;. 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.</p>
  <p>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:</p>
  <p><a href="https://www.primefaces.org/primevue/#/dialog" rel="nofollow noreferrer">https://www.primefaces.org/primevue/#/dialog</a></p>
  <p>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>
  <pre><code>    &lt;p-dialog v-model:visible=&quot;confirmationDialog&quot; :closable=&quot;false&quot; class=&quot;delete-dialog&quot;&gt;
        &lt;div&gt;
          &lt;span&gt;{{ $t('title') }}&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;span&gt;{{ $t('body') }}&lt;/span&gt;
        &lt;/div&gt;
        &lt;p-button
          class=&quot;p-button-text&quot;
          @click=&quot;
            confirmationDialog = !confirmationDialog;
          &quot;
          &gt;{{ $t('close') }}&lt;/p-button
        &gt;
        &lt;p-button
          class=&quot;p-button-text&quot;
          @click=&quot;
            confirmationDialog = !confirmationDialog;
            delete();
          &quot;
          &gt;{{ $t('delete') }}&lt;/p-button
        &gt;
      &lt;/p-dialog&gt;
  </code></pre>
  <p>And this is the CSS</p>
  <pre><code>&lt;style lang=&quot;scss&quot;&gt;
  
  .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;
  }
  
  &lt;/style&gt;
  </code></pre>