Fix issues with FluentProvider - Footer

Puzzlepart · Nov 1, 2023 · 0f41dd1 · 0f41dd1
1 parent be6dae3
commit 0f41dd1
Showing 1 changed file with 16 additions and 14 deletions.
diff --git a/SharePointFramework/PortfolioExtensions/src/components/Footer/Footer.tsx b/SharePointFramework/PortfolioExtensions/src/components/Footer/Footer.tsx
@@ -8,27 +8,29 @@ import { IFooterProps } from './types'
 import { useFooter } from './useFooter'
 import { SiteSettings } from './SiteSettings'
 import { HelpContent } from './HelpContent'
-import { FluentProvider, useId, webLightTheme } from '@fluentui/react-components'
+import { FluentProvider, IdPrefixProvider, useId, webLightTheme } from '@fluentui/react-components'
 
 export const Footer: FC<IFooterProps> = (props) => {
   const fluentProviderId = useId('fp-footer')
   const footer = useFooter(props)
 
   return (
     <FooterContext.Provider value={{ ...footer, props }}>
-      <FluentProvider id={fluentProviderId} theme={webLightTheme}>
-        <div className={styles.footer}>
-          <section className={styles.left}>
-            <SiteSettings />
-            <Configuration />
-            <PromotedLinks />
-          </section>
-          <section className={styles.right}>
-            <InstallVersion />
-            <HelpContent />
-          </section>
-        </div>
-      </FluentProvider>
+      <IdPrefixProvider value={fluentProviderId}>
+        <FluentProvider theme={webLightTheme}>
+          <div className={styles.footer}>
+            <section className={styles.left}>
+              <SiteSettings />
+              <Configuration />
+              <PromotedLinks />
+            </section>
+            <section className={styles.right}>
+              <InstallVersion />
+              <HelpContent />
+            </section>
+          </div>
+        </FluentProvider>
+      </IdPrefixProvider >
     </FooterContext.Provider>
   )
 }