diff --git a/change/@fluentui-react-text-f57fa3f1-b465-4c6a-a0f1-a0e6518e427b.json b/change/@fluentui-react-text-f57fa3f1-b465-4c6a-a0f1-a0e6518e427b.json
new file mode 100644
index 00000000000000..7cbab4df191035
--- /dev/null
+++ b/change/@fluentui-react-text-f57fa3f1-b465-4c6a-a0f1-a0e6518e427b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "export static classes for components",
+  "packageName": "@fluentui/react-text",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-text/etc/react-text.api.md b/packages/react-text/etc/react-text.api.md
index 2e64d9cccb015d..5684a5b7780fc5 100644
--- a/packages/react-text/etc/react-text.api.md
+++ b/packages/react-text/etc/react-text.api.md
@@ -17,28 +17,49 @@ import * as React_2 from 'react';
 const Body_2: FunctionComponent<TextWrapperProps>;
 export { Body_2 as Body }
 
+// @public (undocumented)
+export const bodyClassName = "fui-Body";
+
 // @public
 export const Caption: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const captionClassName = "fui-Caption";
+
 // @public
 export const Display: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const displayClassName = "fui-Display";
+
 // @public
 export const Headline: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const headlineClassName = "fui-Headline";
+
 // @public
 export const LargeTitle: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const largeTitleClassName = "fui-LargeTitle";
+
 // @public
 export const renderText: (state: TextState) => JSX.Element;
 
 // @public
 export const Subheadline: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const subheadlineClassName = "fui-Subheadline";
+
 // @public
 const Text_2: ForwardRefComponent<TextProps>;
 export { Text_2 as Text }
 
+// @public (undocumented)
+export const textClassName = "fui-Text";
+
 // @public (undocumented)
 export type TextCommons = {
     wrap: boolean;
@@ -67,12 +88,21 @@ export type TextState = ComponentState<TextSlots> & TextCommons;
 // @public
 export const Title1: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const title1ClassName = "fui-Title1";
+
 // @public
 export const Title2: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const title2ClassName = "fui-Title2";
+
 // @public
 export const Title3: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const title3ClassName = "fui-Title3";
+
 // @public
 export const useText: (props: TextProps, ref: React_2.Ref<HTMLElement>) => TextState;
 
diff --git a/packages/react-text/src/components/Body/Body.tsx b/packages/react-text/src/components/Body/Body.tsx
index e565b0099d214b..b678d886f60511 100644
--- a/packages/react-text/src/components/Body/Body.tsx
+++ b/packages/react-text/src/components/Body/Body.tsx
@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const bodyClassName = 'fui-Body';
+
 /**
  * Styles for the root slot
  */
@@ -13,4 +15,8 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Body typography variant
  */
-export const Body: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Body' });
+export const Body: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  className: bodyClassName,
+  displayName: 'Body',
+});
diff --git a/packages/react-text/src/components/Body/__snapshots__/Body.test.tsx.snap b/packages/react-text/src/components/Body/__snapshots__/Body.test.tsx.snap
index be1844be0ab174..a01fcdab855539 100644
--- a/packages/react-text/src/components/Body/__snapshots__/Body.test.tsx.snap
+++ b/packages/react-text/src/components/Body/__snapshots__/Body.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Body renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Body fui-Text"
   >
     Default Body
   </span>
diff --git a/packages/react-text/src/components/Caption/Caption.tsx b/packages/react-text/src/components/Caption/Caption.tsx
index 5684ebe2cb77b7..36ff83e2423057 100644
--- a/packages/react-text/src/components/Caption/Caption.tsx
+++ b/packages/react-text/src/components/Caption/Caption.tsx
@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const captionClassName = 'fui-Caption';
+
 /**
  * Styles for the root slot
  */
@@ -13,4 +15,8 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Caption typography variant
  */
-export const Caption: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Caption' });
+export const Caption: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  className: captionClassName,
+  displayName: 'Caption',
+});
diff --git a/packages/react-text/src/components/Caption/__snapshots__/Caption.test.tsx.snap b/packages/react-text/src/components/Caption/__snapshots__/Caption.test.tsx.snap
index e6f16a413be2aa..c9a8180a724ba7 100644
--- a/packages/react-text/src/components/Caption/__snapshots__/Caption.test.tsx.snap
+++ b/packages/react-text/src/components/Caption/__snapshots__/Caption.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Caption renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Caption fui-Text"
   >
     Default Caption
   </span>
diff --git a/packages/react-text/src/components/Display/Display.tsx b/packages/react-text/src/components/Display/Display.tsx
index 283796d8f786ce..9e5d443f13fd52 100644
--- a/packages/react-text/src/components/Display/Display.tsx
+++ b/packages/react-text/src/components/Display/Display.tsx
@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const displayClassName = 'fui-Display';
+
 /**
  * Styles for the root slot
  */
@@ -13,4 +15,8 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Display typography variant
  */
-export const Display: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Display' });
+export const Display: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  className: displayClassName,
+  displayName: 'Display',
+});
diff --git a/packages/react-text/src/components/Display/__snapshots__/Display.test.tsx.snap b/packages/react-text/src/components/Display/__snapshots__/Display.test.tsx.snap
index 450b26d7422cb8..f9c4f0506d7ec5 100644
--- a/packages/react-text/src/components/Display/__snapshots__/Display.test.tsx.snap
+++ b/packages/react-text/src/components/Display/__snapshots__/Display.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Display renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Display fui-Text"
   >
     Default Display
   </span>
diff --git a/packages/react-text/src/components/Headline/Headline.tsx b/packages/react-text/src/components/Headline/Headline.tsx
index 95ff70597cda9e..1b4b0537e2bed5 100644
--- a/packages/react-text/src/components/Headline/Headline.tsx
+++ b/packages/react-text/src/components/Headline/Headline.tsx
@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const headlineClassName = 'fui-Headline';
+
 /**
  * Styles for the root slot
  */
@@ -15,5 +17,6 @@ const useStyles = makeStyles({
  */
 export const Headline: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
+  className: headlineClassName,
   displayName: 'Headline',
 });
diff --git a/packages/react-text/src/components/Headline/__snapshots__/Headline.test.tsx.snap b/packages/react-text/src/components/Headline/__snapshots__/Headline.test.tsx.snap
index 003a05bffbb50a..798a8f5142235b 100644
--- a/packages/react-text/src/components/Headline/__snapshots__/Headline.test.tsx.snap
+++ b/packages/react-text/src/components/Headline/__snapshots__/Headline.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Headline renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Headline fui-Text"
   >
     Default Headline
   </span>
diff --git a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
index 03d8d54d04da46..28a82890c9ef4b 100644
--- a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
+++ b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const largeTitleClassName = 'fui-LargeTitle';
+
 /**
  * Styles for the root slot
  */
@@ -15,5 +17,6 @@ const useStyles = makeStyles({
  */
 export const LargeTitle: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
+  className: largeTitleClassName,
   displayName: 'LargeTitle',
 });
diff --git a/packages/react-text/src/components/LargeTitle/__snapshots__/LargeTitle.test.tsx.snap b/packages/react-text/src/components/LargeTitle/__snapshots__/LargeTitle.test.tsx.snap
index 43a941fd10b769..cde10888a29b68 100644
--- a/packages/react-text/src/components/LargeTitle/__snapshots__/LargeTitle.test.tsx.snap
+++ b/packages/react-text/src/components/LargeTitle/__snapshots__/LargeTitle.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`LargeTitle renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-LargeTitle fui-Text"
   >
     Default LargeTitle
   </span>
diff --git a/packages/react-text/src/components/Subheadline/Subheadline.tsx b/packages/react-text/src/components/Subheadline/Subheadline.tsx
index 6619566d702877..f047bf1c40942b 100644
--- a/packages/react-text/src/components/Subheadline/Subheadline.tsx
+++ b/packages/react-text/src/components/Subheadline/Subheadline.tsx
@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const subheadlineClassName = 'fui-Subheadline';
+
 /**
  * Styles for the root slot
  */
@@ -15,5 +17,6 @@ const useStyles = makeStyles({
  */
 export const Subheadline: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
+  className: subheadlineClassName,
   displayName: 'Subheadline',
 });
diff --git a/packages/react-text/src/components/Subheadline/__snapshots__/Subheadline.test.tsx.snap b/packages/react-text/src/components/Subheadline/__snapshots__/Subheadline.test.tsx.snap
index f319236f0e28cb..97c7ba179b33b9 100644
--- a/packages/react-text/src/components/Subheadline/__snapshots__/Subheadline.test.tsx.snap
+++ b/packages/react-text/src/components/Subheadline/__snapshots__/Subheadline.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Subheadline renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Subheadline fui-Text"
   >
     Default Subheadline
   </span>
diff --git a/packages/react-text/src/components/Text/__snapshots__/Text.test.tsx.snap b/packages/react-text/src/components/Text/__snapshots__/Text.test.tsx.snap
index d7ecb480aa7f00..b6451511a266b5 100644
--- a/packages/react-text/src/components/Text/__snapshots__/Text.test.tsx.snap
+++ b/packages/react-text/src/components/Text/__snapshots__/Text.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Text renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Text"
   >
     Test
   </span>
diff --git a/packages/react-text/src/components/Text/useTextStyles.ts b/packages/react-text/src/components/Text/useTextStyles.ts
index 883d0638845da3..52ce13ff4fee38 100644
--- a/packages/react-text/src/components/Text/useTextStyles.ts
+++ b/packages/react-text/src/components/Text/useTextStyles.ts
@@ -1,6 +1,8 @@
 import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import type { TextState } from './Text.types';
 
+export const textClassName = 'fui-Text';
+
 /**
  * Styles for the root slot
  */
@@ -104,6 +106,7 @@ export const useTextStyles = (state: TextState): TextState => {
   const styles = useStyles();
 
   state.root.className = mergeClasses(
+    textClassName,
     styles.root,
     state.wrap === false && styles.nowrap,
     state.truncate && styles.truncate,
diff --git a/packages/react-text/src/components/Title1/Title1.tsx b/packages/react-text/src/components/Title1/Title1.tsx
index e1b438dbda1e21..82098ca05eeb98 100644
--- a/packages/react-text/src/components/Title1/Title1.tsx
+++ b/packages/react-text/src/components/Title1/Title1.tsx
@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const title1ClassName = 'fui-Title1';
+
 /**
  * Styles for the root slot
  */
@@ -13,4 +15,8 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Title 1 typography variant
  */
-export const Title1: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Title1' });
+export const Title1: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  className: title1ClassName,
+  displayName: 'Title1',
+});
diff --git a/packages/react-text/src/components/Title1/__snapshots__/Title1.test.tsx.snap b/packages/react-text/src/components/Title1/__snapshots__/Title1.test.tsx.snap
index 98ab9e0ea3f8f3..06565cbdf844fe 100644
--- a/packages/react-text/src/components/Title1/__snapshots__/Title1.test.tsx.snap
+++ b/packages/react-text/src/components/Title1/__snapshots__/Title1.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Title1 renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Title1 fui-Text"
   >
     Default Title1
   </span>
diff --git a/packages/react-text/src/components/Title2/Title2.tsx b/packages/react-text/src/components/Title2/Title2.tsx
index 380f00ab5365f1..7e624d32aa5a7c 100644
--- a/packages/react-text/src/components/Title2/Title2.tsx
+++ b/packages/react-text/src/components/Title2/Title2.tsx
@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const title2ClassName = 'fui-Title2';
+
 /**
  * Styles for the root slot
  */
@@ -13,4 +15,8 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Title 2 typography variant
  */
-export const Title2: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Title2' });
+export const Title2: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  className: title2ClassName,
+  displayName: 'Title2',
+});
diff --git a/packages/react-text/src/components/Title2/__snapshots__/Title2.test.tsx.snap b/packages/react-text/src/components/Title2/__snapshots__/Title2.test.tsx.snap
index 99a3aa2a7acbca..816a943e302fd9 100644
--- a/packages/react-text/src/components/Title2/__snapshots__/Title2.test.tsx.snap
+++ b/packages/react-text/src/components/Title2/__snapshots__/Title2.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Title2 renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Title2 fui-Text"
   >
     Default Title2
   </span>
diff --git a/packages/react-text/src/components/Title3/Title3.tsx b/packages/react-text/src/components/Title3/Title3.tsx
index b3798357cfbae8..d3d537708d07d4 100644
--- a/packages/react-text/src/components/Title3/Title3.tsx
+++ b/packages/react-text/src/components/Title3/Title3.tsx
@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const title3ClassName = 'fui-Title3';
+
 /**
  * Styles for the root slot
  */
@@ -13,4 +15,8 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Title 3 typography variant
  */
-export const Title3: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Title3' });
+export const Title3: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  className: title3ClassName,
+  displayName: 'Title3',
+});
diff --git a/packages/react-text/src/components/Title3/__snapshots__/Title3.test.tsx.snap b/packages/react-text/src/components/Title3/__snapshots__/Title3.test.tsx.snap
index 8b49a75a2a8c6f..2e300bcc1ab92c 100644
--- a/packages/react-text/src/components/Title3/__snapshots__/Title3.test.tsx.snap
+++ b/packages/react-text/src/components/Title3/__snapshots__/Title3.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Title3 renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Title3 fui-Text"
   >
     Default Title3
   </span>
diff --git a/packages/react-text/src/components/wrapper.tsx b/packages/react-text/src/components/wrapper.tsx
index 98d8f652e7e57a..7516f29a528713 100644
--- a/packages/react-text/src/components/wrapper.tsx
+++ b/packages/react-text/src/components/wrapper.tsx
@@ -7,17 +7,18 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 export type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;
 
 export function createWrapper(options: {
+  className: string;
   displayName: string;
   useStyles: () => Record<'root', string>;
 }): React.FunctionComponent<TextWrapperProps> {
-  const { useStyles, displayName } = options;
+  const { useStyles, className, displayName } = options;
   const Wrapper: ForwardRefComponent<TextWrapperProps> = React.forwardRef((props, ref) => {
     const styles = useStyles();
     const state = useText(props as TextProps, ref);
 
     useTextStyles(state);
 
-    state.root.className = mergeClasses(state.root.className, styles.root, props.className);
+    state.root.className = mergeClasses(className, state.root.className, styles.root, props.className);
 
     return renderText(state);
   });