css style isolation

[tobemaster56]

docusaurus is a very useful tool, I love it, we are creating our own component library, the demo of the component library, and eventually rendering in docusaurus, but I found a problem, some of the global styles of docusaurus's own themes affect the React components in the demo. Is there any good advice or elegant way to solve this problem?

[Josh-Cena]

We've heard this request multiple times recently. You can find a response here: #6032 and in this canny post .

Have you tried all: revert or other CSS tricks?

[tobemaster56]

According to your suggestion, I wrote a demo, this is easy for a single element. In my real case, I defined a demo root component, and the components that need to be rended will be wrapped in the demo. I added a class' demo revert 'to the root element of the demo. The corresponding style is that

.demo-revert * {
 all: revert;
}

,but the actual results are not ok. before i apply the class .demo-revert,

the left arrow is higher than the others. why? because the other li is affected by global styles

after i used .demo-revert,

so, in my case , The situation is complicated

[Josh-Cena]

Ah, I see. It's still related to our CSS insertion order. You may have to override specific CSS rules.

[tobemaster56]

yes, It's still related to our CSS insertion order, and adjusting the order is not easy

[tobemaster56]

Anyway, thank you for your reply

[tobemaster56]

Ah, I see. It's still related to our CSS insertion order. You may have to override specific CSS rules.

As discussed earlier, because I developed the pagination component, I quickly discovered the problem, and of course I could override this global style, and another colleague of mine wrote a demo about the calendar, but because the calendar component was not developed by him, it took him some time to figure out that it was the global style of docusaurus that affected it. If you find a problem, write a corresponding overprint style, which is only a temporary solution. We sincerely hope that there are areas in the docusaurus documentation that are free from global styles.

[gpbl]

I have the same problem with https://react-day-picker.js.org and other projects where we use Docusaurus.

The question is why is Docusaurus overriding the style of HTML elements? Or is it Infima? The CSS cascading issues have been solved since years, why aren't these practices being followed here? Is there anything we can do?

Here is what i've tried so far:

The "revert: all" workaround

The trick with revert: all doesn't works well, as there are many edge-cases like hovers, odd-even rules, and other selectors where the workaround is difficult to implement. Carefully "undoing" the style is not a solution, as you can't tell – without looking at the source – what's being overridden. Would a future update to docusaurus break the style again? etc.

The "iframe" workaround

I've tried to use an iframe to render the components in a new /render route – in the hope at least I could switch to a "bare-bone theme" for that route. However there's no way to tell Docusaurus to not load any global stylesheet for that route.

https://react-day-picker.js.org/render?example=start

As you can see it stills inherit style from tables:

Sandpack

I could finally rely on Sandpack as it is a good way to isolate the components, as it recreates a new app without the Docusaurus's chrome. Yet it is slow, the viewport is constrained, requires extra work.

I really hope for some inputs! Thanks.

[slorber]

Understand this problem and would also like to get it fixed so that you don't have to use an Iframe

Unfortunately, I don't have a good solution to solve it today with Docusaurus/classic theme/Infima

Reopened #6032