fix(xplat): Fix FluentProvider, don't render style tag on native (#30837

)

Add a isReactNative constant to explicitly check if on React Native. Update FluentProvider to not render a <style> tag on native.

packages/react-components/react-platform-adapter-preview/etc/react-platform-adapter-preview.api.md

@@ -20,6 +20,9 @@ export const getStylesFromClassName: (className: string) => {
     [key: string]: unknown;
 }[];
 
+// @public (undocumented)
+export const isReactNative: boolean;
+
 // @public (undocumented)
 export const jsxPlatformAdapter: (reactJsx: JSXRuntime) => JSXRuntime;
 

packages/react-components/react-platform-adapter-preview/src/index.ts

@@ -6,6 +6,7 @@ export { makeResetStyles } from './styling/makeResetStyles';
 export { makeStyles } from './styling/makeStyles';
 export { mergeClasses } from './styling/mergeClasses';
 export { shorthands } from './styling/shorthands';
+export { isReactNative } from './utilities/isReactNative';
 
 // re-export some griffel types to have fluent use the griffel adapter instead of griffel directly
 export { useRenderer_unstable, TextDirectionProvider } from '@griffel/react';

packages/react-components/react-platform-adapter-preview/src/utilities/isReactNative.native.ts

@@ -0,0 +1 @@
+export const isReactNative: boolean = true;

packages/react-components/react-platform-adapter-preview/src/utilities/isReactNative.ts

@@ -0,0 +1 @@
+export const isReactNative: boolean = false;

packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx

@@ -13,7 +13,7 @@ import {
 } from '@fluentui/react-shared-contexts';
 import type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';
 import { IconDirectionContextProvider } from '@fluentui/react-icons';
-import { XPlatProvider } from '@fluentui/react-platform-adapter-preview';
+import { isReactNative, XPlatProvider } from '@fluentui/react-platform-adapter-preview';
 
 /**
  * Render the final JSX of FluentProvider
@@ -41,7 +41,7 @@ export const renderFluentProvider_unstable = (
                   <IconDirectionContextProvider value={contextValues.iconDirection}>
                     <OverridesProvider value={contextValues.overrides_unstable}>
                       <state.root>
-                        {canUseDOM() ? null : (
+                        {canUseDOM() || isReactNative ? null : (
                           <style
                             // Using dangerous HTML because react can escape characters
                             // which can lead to invalid CSS.