bsastre
3 years agoOccasional Visitor
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: