Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When using <TabItem className="foo"> inside a <Tabs lazy>, the className attribute is ignored. I'd expect that the behavior is the same as for <Tabs> (without the lazy attribute).

Reproducible demo

https://codesandbox.io/p/devbox/little-cookies-g2xysx

Steps to reproduce

1. lazy to Tabs Item
2. className to TabItem

Expected behavior

<Tabs lazy>
    <TabItem value="apple" label="Apple" className={styles.apple} default>
          This is an apple 🍎
    </TabItem>
    <TabItem value="orange" label="Orange">
          This is an orange 🍊
    </TabItem>
    <TabItem value="banana" label="Banana">
          This is a banana 🍌
    </TabItem>
</Tabs>

with styles.module.css

.apple {
  background-color: red;
}

Actual behavior

The className is overwritten with 'margin-top--md' https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx#L125

Your environment

• Public source code:
• Public site URL: https://codesandbox.io/p/devbox/little-cookies-g2xysx
• Docusaurus version used: 3.4
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I'd be willing to fix this bug myself.