diff --git a/change/@fluentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json b/change/@fluentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json new file mode 100644 index 0000000000000..16b55ab06ee9b --- /dev/null +++ b/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": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-image/package.json b/packages/react-components/react-image/package.json index 8f33ce1b18366..83ddbade3a3d5 100644 --- a/packages/react-components/react-image/package.json +++ b/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" diff --git a/packages/react-components/react-image/src/components/Image/Image.tsx b/packages/react-components/react-image/src/components/Image/Image.tsx index bfdd900be5549..69965888d83c7 100644 --- a/packages/react-components/react-image/src/components/Image/Image.tsx +++ b/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 = 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); });