Fix - @theme/ApiItem causes undesired website-wide style changes

[hadar-co]

Description

Adding docItemComponent: "@theme/ApiItem" in the docusaurus config causes undesired behavior in the website, including pages that are completely unrelated to the api.

After investigation, it seems that the main div in each page is missing the markdown classname, causing the following changes in all pages of the site:

1. My h2 headers change size.
2. My h2 headers' margins change.

If I inspect the page, and add the markdown classname to the div, the original styling is applied and all is good.

Motivation and Context

This issue affects the styling of the entire docusaurus website, including pages that are unrelated to the api.

How Has This Been Tested?

Tested using Docusaurus V3, using the latest V3 beta of this library.

Screenshots

Here is what the site looks like without the library:



Here is what the site looks like with the library (note the changed header size and missing margin-top):

Types of changes

• Bug fix (non-breaking change which fixes an issue)

Checklist

• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes if appropriate.
• All new and existing tests passed.

[github-actions]

Visit the preview URL for this PR (updated for commit e72569f):

https://docusaurus-openapi-36b86--pr839-etum35uy.web.app

_{(expires Wed, 17 Jul 2024 18:04:19 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}