FluentUI Web Components - Set FluentDialog control size in razor when multiple dialog controls present

[SreeniC]

I've multiple 'FluentDialog' controls within a razor page, and have CSS style applied for height/width properties.
However, it's been applied for all dialog controls on the page.
How can I apply for specific style(height/width) for a given single control. ?

I referred this link (#207) too.

I tried by adding separate class/id for my second dialog control and also added applied inline styles, but none of them worked.

HTML-

CSS:-

fluent-dialog::dlgEdit::part(dialog) {
--dialog-width: 500px;
--dialog-height: 340px;
padding: 2rem;
}

Please help at the earliest.
Thanks in advance.

[SreeniC]

This issue has been resolved by adding separate classes for each 'FluentDialog' control.

Resolved -
::deep > fluent-dialog.edit-enty::part(control) {
--dialog-width: 500px;
--dialog-height: 340px;
padding: 2rem;
}

Here 'edit-enty' is the class added to one of the FluentDialog controls.
Hope this helps for others facing similar issues and need guidance.