BlazorMonaco - Styling issue

I have installed and configured the BlazorMonaco in my Blazor WebAssembly application as directed here: https://github.com/serdarciplak/BlazorMonaco

In the end, the rendered editor is set to height: 5px by default.

I have tried to modify the height of the editor by using the CssClass property. But it does not get reflected on the screen.

Home.razor

`@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<StandaloneCodeEditor Id="my-editor-instance-id" ConstructionOptions="EditorConstructionOptions" CssClass="my-editor-class" />@code {    private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)    {        return new StandaloneEditorConstructionOptions            {                AutomaticLayout = true,                Language = "javascript",                Value = "function xyz() {\n" +"   console.log(\"Hello world!\");\n" +"}"            };    }}`

Home.razor.css

`.my-editor-class{    height: 500px;}`

Can I get help in setting the height of the editor in this application? Please let me know if any other details are required. Any leads would be appreciated.

I have also tried styling the editor using:

1. monaco-editor-container css class

2. The Id value that is set for the razor component

   <StandaloneCodeEditor Id="my-editor-id" CssClass="my-editor-class" />

   .monaco-editor-container { height: 100px; }

   and

   #my-editor-id { height: 100px; }