Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TabItem ignores className if lazy attribute is set #10218

Closed
7 tasks done
lebalz opened this issue Jun 14, 2024 · 0 comments · Fixed by #10219
Closed
7 tasks done

TabItem ignores className if lazy attribute is set #10218

lebalz opened this issue Jun 14, 2024 · 0 comments · Fixed by #10219
Labels
bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers

Comments

@lebalz
Copy link
Contributor

lebalz commented Jun 14, 2024

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.
@lebalz lebalz added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Jun 14, 2024
lebalz added a commit to lebalz/docusaurus that referenced this issue Jun 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant