Swagger UI styles

Hi, 

I am trying to use swagger ui in an existing with stenciljs.

The swagger user interface is displaing right, but without any styles. 

I would like the user interface to have the basic styles.

This is my code:

import { Component, Host, h, Prop } from '@stencil/core';
import SwaggerUI from 'swagger-ui';

@Component({
  tag: 'gx-launchpad-api',
  styleUrl: 'gx-launchpad-api.scss',
  shadow: false,
})
export class GxLaunchpadApi {
  swaggerContainer!: HTMLElement;

  @Prop() data: Object;

  componentDidLoad() {
    SwaggerUI({
      url: 'https://petstore3.swagger.io/api/v3/openapi.json',
      dom_id: '#swagger-ui',
      domNode: this.swaggerContainer,
      layout: 'BaseLayout', 
    });
  }
  render() {
    return (
      <Host>
        <div id="swagger-ui" ref={el => (this.swaggerContainer = el as HTMLElement)}></div>
        <article class="card"></article>
      </Host>
    );
  }
}

 any help would be much appreciated.

This is how it looks: