Using Stylesheets

Automatic loading of stylesheets

If you are using a .razor file you can create another file mypanel.razor.scss (where mypanel is the name of your UI panel) and it will automatically load the stylesheet and apply it to your UI.

If you are using a partial class to augment the code of the generated razor class, you will need to change the extension of the file to .razor.cs instead of just .cs otherwise the automatic stylesheet loading won't work.

For example: mypanel.razor and mypanel.razor.cs will load mypanel.razor.scss

Manually setting stylesheet

You can use the [Stylesheet("path/to/stylesheet.scss")] attribute to manually set which stylesheet is used.

Applying Styles to

If your panel is named MyPanel (ie. MyPanel.razor) then in your scss you can define styles for a MyPanel element type in your MyPanel.razor.scss file.

MyPanel { width: 100%; height: 100%; }