How do we change the css styles of 'swagger-ui-react' library ?

[stefinie123]

Is your feature request related to a problem?

Currently I'm using swagger-ui-react library in my React application. I want to modify the look and feel of the swagger UI component to match with the theme of my app, but there seems to be no way of doing this with `swagger-ui-react' library

Describe the solution you'd like

Can you support this feature in the library. Or else is there any alternative way for this ?

[wparad]

@stefinie123, I didn't find any good way to modify the theming of the components available in swagger-ui. That is one of the reasons why we switched libraries to one like openapi explorer

[RobinLallier]

A solution could be to rewrite the swagger-ui-react css using css variables. This way users could easily override default style from swagger by overriding the variables locally using custom selectors.

Let me know if you're interested for a PR

[zaadevofc]

just like this :

=> tailwindcss

.swagger-ui * {
  @apply !font-[Onest];
}

=> native css

.swagger-ui * {
  font-family: 'Onest' !important;
}

don't forget to add !important