Skip to content

TabItem ignores className if lazy attribute is set #10218

@lebalz

Description

@lebalz

Have you 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;
}
image

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

image

Your environment

Self-service

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugAn error in the Docusaurus core causing instability or issues with its executionstatus: needs triageThis issue has not been triaged by maintainers

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions