How to apply custom style to FluentUI Web Components

[da-ms-22]

Hi, I'm using Dialog component in a Blazor wasm project. The default dialog is rendered in an unreadable way, as shown in below screenshot.
I want to adjust the margin top, width and height of the dialog. I've tried various CSS methods. And there is no built in design token for margin, height or width. How to style it?

Code:

In browser:

[vnbaaij]

Hi,
Regarding the height and width, see #207. You can address margin through css as well with something like:

::deep > fluent-dialog::part(control) {
    --dialog-width: 300px;
    --dialog-height: 350px;
    padding: 2rem;
}

Beware that the <FluentDialog> needs to be in a <div> or something like that for the ::deep to work.

[da-ms-22]

Thank you very much Vincent! This is great help to our project. Also the control now it has its dedicated <div>!