How to apply different CSS(styling) for multiple igx-dialog in same component

In my page I have multiple igx-dialog compoenents.

For example

 <igx-dialog #dialog1   leftButtonLabel=”Cancel”   rightButtonLabel=”OK”  >

 <igx-dialog #dialog2   leftButtonLabel=”Cancel”    rightButtonLabel=”SAVE”  >

For dialog1 and dialog2 I wanted to have different styling i.e., apply different font, different back ground color – different CSS

The below CSS is applying to all dialog boxes which I don’t want.How can I differentiate?

(Tried adding  id and class to igx-dialog tag didn’t work)

.igx-dialog__window {

position: relative;

min-width: 17.5rem;

border-radius: 4px;

background: #fff;

}

Hello,

I have been looking into your question and my suggestion in order to apply different styles to the dialogs is to use themes that extend the igx-dialog-theme. More about IgxDialog Styling could be found here.

Also, a list of all parameters included into the dialog theme could be found here.

Additionally, I have prepared a small sample with two dialogs that are styled differently and it could be found here.

Please test it on your side and let me know if I may be of any further assistance.

Sincerely,
Teodosia Hristodorova
Associate Software Developer

Thanks for the sample code.

I have added styling as below in .scss file:

$my-discard-theme: igx-dialog-theme(

  $background: #011627,

  $title-color: #ecaa53,

  $message-color: #fefefe,

  $border-radius: 0.3

);

:host { 

  .overlay1 {

    ::ng-deep {

      @include igx-dialog($my-discard-theme);

    }

  }

  

}

But I am getting below error:

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

$my-discard-theme: igx-dialog-theme(
^
Plain CSS functions don't support keyword arguments.
╷
487 │ $my-discard-theme: igx-dialog-theme(
│ ┌────────────────────^
488 │ │ $background: #011627,
489 │ │ $title-color: #ecaa53,
490 │ │ $message-color: #fefefe,
491 │ │ $border-radius: 0.3
492 │ │ );
│ └─^
╵
stdin 487:20 root stylesheet

Hello,

Thank you for following up.

As the sample, provided by Teodosia demonstrates styling the dialog windows working correctly, this indicates a possible issue with your project environment.

In an effort to reproduce this error I ran the sample locally. It did successfully compile, however I was able to reproduce the same error by omitting the following import in the _variables.scss file:

@import '~igniteui-angular/lib/core/styles/themes/index';

As you can read from the Dialog Window’s topic Styling section here, the imported index file is where all the theme functions and component mixins live. So, my suggestion is to import it. Additionally, you could refer to the StackBlitz sample for other style configurations as well.

Please, test this suggestion on your side and let me know if it resolves your issue. Alternatively, if the error persists, it would be very helpful if you can provide an isolated sample, where this behavior is reproduced, so I can investigate it further.

Thank you for your cooperation.

 

Sincerely,
Bozhidara Pachilova
Associate Software Developer