Revert removal of Griffel dependency from usePortalMount

change/@fluentui-react-portal-aa25b18c-fd1c-479e-a98c-f045187327b7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "revert: revert removal of Griffel dependency from usePortalMount #35994",
+  "packageName": "@fluentui/react-portal",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.ts

@@ -6,9 +6,10 @@ import {
   useFluent_unstable as useFluent,
   usePortalMountNode as usePortalMountNodeContext,
 } from '@fluentui/react-shared-contexts';
+import { mergeClasses } from '@griffel/react';
 import { useFocusVisible } from '@fluentui/react-tabster';
 
-import { usePortalMountNodeStyles } from './usePortalMountNodeStyles';
+import { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';
 
 const useInsertionEffect = (React as never)['useInsertion' + 'Effect'] as typeof React.useLayoutEffect | undefined;
 
@@ -200,14 +201,16 @@ const useModernElementFactory: UseElementFactory = options => {
       return;
     }
 
-    elementProxy.setAttribute('class', className);
+    const classesToApply = className.split(' ').filter(Boolean);
+
+    elementProxy.classList.add(...classesToApply);
     elementProxy.setAttribute('dir', dir);
     elementProxy.setAttribute('data-portal-node', 'true');
 
     focusVisibleRef.current = elementProxy;
 
     return () => {
-      elementProxy.removeAttribute('class');
+      elementProxy.classList.remove(...classesToApply);
       elementProxy.removeAttribute('dir');
     };
   }, [className, dir, elementProxy, focusVisibleRef]);
@@ -243,18 +246,17 @@ export const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElem
 
   // eslint-disable-next-line @typescript-eslint/no-deprecated
   const focusVisibleRef = useFocusVisible<HTMLDivElement>() as React.MutableRefObject<HTMLElement | null>;
+  const classes = usePortalMountNodeStylesStyles();
   const themeClassName = useThemeClassName();
 
   const factoryOptions: UseElementFactoryOptions = {
     dir,
     disabled: options.disabled,
     focusVisibleRef,
 
-    className: [themeClassName, options.className].filter(Boolean).join(' '),
+    className: mergeClasses(themeClassName, classes.root, options.className),
     targetNode: mountNode ?? targetDocument?.body,
   };
 
-  usePortalMountNodeStyles(options.disabled);
-
   return useElementFactory(factoryOptions);
 };

packages/react-components/react-portal/library/src/components/Portal/usePortalMountNodeStyles.styles.ts

@@ -0,0 +1,18 @@
+'use client';
+
+import { makeStyles } from '@griffel/react';
+
+export const usePortalMountNodeStylesStyles = makeStyles({
+  root: {
+    // Creates new stacking context to prevent z-index issues
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
+    //
+    // Also keeps a portal on top of a page to prevent scrollbars from appearing
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+
+    zIndex: 1000000,
+  },
+});