Fix: Implement Custom Style Hook for Card component

change/@fluentui-react-card-7fc24491-6b02-436b-8f94-650824f19639.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix: implemented custom style hook for Card, CardFooter, CardHeader, CardPreview",
+  "packageName": "@fluentui/react-card",
+  "email": "terynkum@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-card/library/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
     "@fluentui/react-jsx-runtime": "^9.0.50",
+    "@fluentui/react-shared-contexts": "^9.21.2",
     "@fluentui/react-tabster": "^9.24.0",
     "@fluentui/react-text": "^9.4.32",
     "@fluentui/react-theme": "^9.1.24",

packages/react-components/react-card/library/src/components/Card/Card.tsx

@@ -5,6 +5,7 @@ import { useCardStyles_unstable } from './useCardStyles.styles';
 import type { CardProps } from './Card.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCardContextValue } from './useCardContextValue';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * A card provides scaffolding for hosting actions and content for a single topic.
@@ -14,6 +15,9 @@ export const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElem
   const cardContextValue = useCardContextValue(state);
 
   useCardStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useCardStyles_unstable')(state);
+
   return renderCard_unstable(state, cardContextValue);
 });
 

packages/react-components/react-card/library/src/components/CardFooter/CardFooter.tsx

@@ -4,6 +4,7 @@ import { renderCardFooter_unstable } from './renderCardFooter';
 import { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';
 import type { CardFooterProps } from './CardFooter.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * Component to render Button actions in a Card component.
@@ -12,6 +13,9 @@ export const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef
   const state = useCardFooter_unstable(props, ref);
 
   useCardFooterStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useCardFooterStyles_unstable')(state);
+
   return renderCardFooter_unstable(state);
 });
 

packages/react-components/react-card/library/src/components/CardHeader/CardHeader.tsx

@@ -4,6 +4,7 @@ import { renderCardHeader_unstable } from './renderCardHeader';
 import { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';
 import type { CardHeaderProps } from './CardHeader.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * Component to render an image, text and an action in a Card component.
@@ -12,6 +13,9 @@ export const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef
   const state = useCardHeader_unstable(props, ref);
 
   useCardHeaderStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useCardHeaderStyles_unstable')(state);
+
   return renderCardHeader_unstable(state);
 });
 

packages/react-components/react-card/library/src/components/CardPreview/CardPreview.tsx

@@ -4,6 +4,7 @@ import { renderCardPreview_unstable } from './renderCardPreview';
 import { useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';
 import type { CardPreviewProps } from './CardPreview.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * Component to render image previews of documents or articles in a Card component.
@@ -12,6 +13,9 @@ export const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardR
   const state = useCardPreview_unstable(props, ref);
 
   useCardPreviewStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useCardPreviewStyles_unstable')(state);
+
   return renderCardPreview_unstable(state);
 });
 

packages/react-components/react-card/stories/src/Card/CardDefault.stories.tsx

@@ -1,8 +1,16 @@
 import * as React from 'react';
 
-import { makeStyles, Body1, Caption1, Button } from '@fluentui/react-components';
+import {
+  makeStyles,
+  Body1,
+  Caption1,
+  Button,
+  Card,
+  CardFooter,
+  CardHeader,
+  CardPreview,
+} from '@fluentui/react-components';
 import { ArrowReplyRegular, ShareRegular } from '@fluentui/react-icons';
-import { Card, CardFooter, CardHeader, CardPreview } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
   const ASSET_URL =