fix(theme): ignored className attribute on lazy loaded TabItem (#10219)

facebook · Jun 18, 2024 · 591914c · 591914c
1 parent 88788ce
commit 591914c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -122,7 +122,9 @@ function TabContent({
       // fail-safe or fail-fast? not sure what's best here
       return null;
     }
-    return cloneElement(selectedTabItem, {className: 'margin-top--md'});
+    return cloneElement(selectedTabItem, {
+      className: clsx('margin-top--md', selectedTabItem.props.className),
+    });
   }
   return (
     <div className="margin-top--md">

diff --git a/website/_dogfooding/_pages tests/tabs-tests.mdx b/website/_dogfooding/_pages tests/tabs-tests.mdx
@@ -46,3 +46,17 @@ export const isMacOS = typeof window !== 'undefined' && navigator.platform.start
 ```
 
 When clicking tabs above, they should stay under cursor and we should adjust the scroll position.
+
+## Tabs with className and lazy loading
+
+<Tabs lazy>
+  <TabItem value="apple" label="Apple" className="alert alert--primary" default>
+    This is an apple 🍎
+  </TabItem>
+  <TabItem value="orange" label="Orange" className="alert alert--secondary">
+    This is an orange 🍊
+  </TabItem>
+  <TabItem value="banana" label="Banana" className="alert alert--success">
+    This is a banana 🍌
+  </TabItem>
+</Tabs>