Fix css capture for portals in range datepickers

Author: KoolADE85

components/dash-core-components/src/fragments/DatePickerRange.tsx

@@ -110,7 +110,7 @@ const DatePickerRange = ({
     // Capture CSS variables for portal mode
     const portalStyle = useMemo(() => {
         return hasPortal ? captureCSSForPortal(containerRef) : undefined;
-    }, [hasPortal]);
+    }, [hasPortal, isCalendarOpen]);
 
     useEffect(() => {
         setInternalStartDate(strAsDate(start_date));

components/dash-core-components/src/utils/calendar/cssVariables.ts

@@ -25,11 +25,15 @@ export function captureCSSForPortal(
     }
 
     // Capture key inherited properties
-    const inheritedProps = ['fontFamily', 'fontSize', 'color'];
+    const inheritedProps = ['font-family', 'font-size', 'color'];
     inheritedProps.forEach(prop => {
         const value = computedStyle.getPropertyValue(prop);
         if (value) {
-            styles[prop] = value;
+            // Convert hyphenated CSS property names to camelCase for React
+            const camelCaseProp = prop.replace(/-([a-z])/g, (_, letter) =>
+                letter.toUpperCase()
+            );
+            styles[camelCaseProp] = value;
         }
     });