feat: Adding calls to custom style hooks derived from context in react-image components

change/@fluentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Adding calls to custom style hooks derived from context.",
+  "packageName": "@fluentui/react-image",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-image/package.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@griffel/react": "^1.5.2",
+    "@fluentui/react-shared-contexts": "^9.3.0",
     "@fluentui/react-utilities": "^9.7.0",
     "@fluentui/react-theme": "^9.1.5",
     "tslib": "^2.1.0"

packages/react-components/react-image/src/components/Image/Image.tsx

@@ -4,14 +4,19 @@ import { useImage_unstable } from './useImage';
 import { useImageStyles_unstable } from './useImageStyles';
 import type { ImageProps } from './Image.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * The Image component ensures the consistent styling of images.
  */
 export const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {
   const state = useImage_unstable(props, ref);
+
   useImageStyles_unstable(state);
 
+  const { useImageStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
+
   return renderImage_unstable(state);
 });