Limit default theme CSS Scope
under review
Nicholas Ochoa
The default Docusaurus theme has CSS that styles HTML elements directly (such as
table td, table th
or table tr
without referencing classes or anything more specific. Is it possible to limit or scope these styles somehow?We're using Redoc to include a page that has our OpenAPI spec and while it looks about 95% correct, the Docusaurus CSS styles are either overriding or applying to a lot of the Redoc HTML elements. I'm currently going through and creating a custom CSS that applies directly to Redoc elements but it's a pretty tedious process.
Sébastien Lorber
marked this post as
under review
That makes sense for me to have better component-level encapsulation of styling.
That's worth mentioning concrete use-cases where this is a problem to the repo.
Redoc is already a good one.
Alexey Pyltsyn
We use our own CSS framework, and we will not definitely refuse to use it. It would be nice if you wrote all the difficulties that you had.
Nicholas Ochoa
Alexey Pyltsyn: I think you misunderstood, I'm not asking for it to not be used. As an example, a table output by Redoc is being styled using the CSS styles in the Docusaurus theme because the theme uses
table td
, is there any way to limit the CSS to just Docusaurus elements?Alexey Pyltsyn
Nicholas Ochoa: Just override standard styles with
!important
rule, why not?