figured out className issue

mongodb · Feb 13, 2025 · 8bc8b9f · 8bc8b9f
1 parent e534a3f
commit 8bc8b9f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/packages/code/src/Code.stories.tsx b/packages/code/src/Code.stories.tsx
@@ -144,6 +144,10 @@ export const LiveExample: StoryType<typeof Code, FontSizeProps> = ({
       highlightLines={highlightLines ? [6, [10, 15]] : undefined}
       className={css`
         width: 100%;
+
+        .lg-highlight-custom {
+          color: red;
+        }
       `}
     >
       {jsSnippet}
@@ -167,6 +171,10 @@ export const CustomWord: StoryType<typeof Code, FontSizeProps> = ({
       highlightLines={highlightLines ? [6, [10, 15]] : undefined}
       className={css`
         width: 100%;
+
+        .lg-highlight-custom {
+          color: red;
+        }
       `}
     >
       {jsCustomSnippet}
@@ -195,13 +203,6 @@ export const WithCustomActions: StoryType<typeof Code, FontSizeProps> = ({
           showCustomActionButtons
         />
       }
-      //TODO: className is not working
-      className={css`
-        opacity: 0.5;
-        .lg-highlight-custom {
-          color: red;
-        }
-      `}
     >
       {jsSnippet}
     </Code>

diff --git a/packages/code/src/Code/Code.tsx b/packages/code/src/Code/Code.tsx
@@ -74,6 +74,8 @@ function Code({
   const { theme, darkMode } = useDarkMode(darkModeProp);
   const baseFontSize = useBaseFontSize();
 
+  console.log({ className });
+
   useIsomorphicLayoutEffect(() => {
     const scrollableElement = scrollableElementRef.current;
 
@@ -233,7 +235,6 @@ function Code({
                 collapsedCodeHeight,
                 isMultiline,
                 showExpandButton,
-                className,
               })}
               onScroll={onScroll}
               ref={scrollableElementRef}