I'm using Primeng's Dialog component and I wanted to add an animation to increase its scale when it opens.

Adding a trigger animation to my component works and the CSS style changes in the DOM but the dialog does not change. I'm assuming it's because p-dialog is just the selector, how can I apply it for the div under it?

trigger('expandBox', [
  state('inactive', style({
    transform: 'scale(1)',
  })),
  state('active',   style({
    transform: 'scale(2)',
  })),
  transition('inactive => active', animate('100ms ease-in')),
  transition('active => inactive', animate('100ms ease-out'))
])

<p-dialog
  [@expandBox]='dialogVisibleString'
  header="Meeting Details - {{tileday}}" 
  ...
</p-dialog>

I have had this issue in the pass where I wanted to add animations to a 3rd party component and I've never been sure how to fix it.