Overriding Dialog Header Background Color

UI Components for Vue
Post Reply
richardshergold
Posts: 5
Joined: 13 Oct 2021, 14:16

02 Dec 2021, 13:14

I'm trying to override the background colour of a particular type of dialog (in this case an error dialog) and am trying to follow the docs which say I need to use ::v-deep but it's not working and the header is taking it's colour from theme.css and ignoring my local override. What am I doing wrong?

Code: Select all

<Dialog class="error-dialog">

Code: Select all

<style lang="scss" scoped>
::v-deep(.error-dialog.p-dialog) {
  .p-dialog-header {
    background: #c8102e;
  }
}
</style>

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

03 Dec 2021, 10:46

You can remove scoped definition because dialog appends to body by default but I don't know test case or you can use header slot templating.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests