diff --git a/change/@fluentui-react-checkbox-3e6d8bd5-20a7-4297-b1f5-922b4b2c5974.json b/change/@fluentui-react-checkbox-3e6d8bd5-20a7-4297-b1f5-922b4b2c5974.json
new file mode 100644
index 00000000000000..0043e88962cbdb
--- /dev/null
+++ b/change/@fluentui-react-checkbox-3e6d8bd5-20a7-4297-b1f5-922b4b2c5974.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update snapshots",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-label-e3ee4196-7548-4498-a26a-cbeef32886dd.json b/change/@fluentui-react-label-e3ee4196-7548-4498-a26a-cbeef32886dd.json
new file mode 100644
index 00000000000000..6b36fd50391f7f
--- /dev/null
+++ b/change/@fluentui-react-label-e3ee4196-7548-4498-a26a-cbeef32886dd.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "export static classes for components",
+  "packageName": "@fluentui/react-label",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-switch-9c3df71d-bf72-4118-8ac7-e14d0dd12d9f.json b/change/@fluentui-react-switch-9c3df71d-bf72-4118-8ac7-e14d0dd12d9f.json
new file mode 100644
index 00000000000000..e06c94a9908f43
--- /dev/null
+++ b/change/@fluentui-react-switch-9c3df71d-bf72-4118-8ac7-e14d0dd12d9f.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "export static classes for components",
+  "packageName": "@fluentui/react-switch",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index b315501423c3bb..6cd1898beac69f 100644
--- a/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Checkbox renders a default state 1`] = `
 <div>
   <label
-    class="fui-Checkbox"
+    class="fui-Label fui-Checkbox"
   >
     <div
       class=""
@@ -36,7 +36,7 @@ exports[`Checkbox renders a default state 1`] = `
 exports[`Checkbox renders checked correctly 1`] = `
 <div>
   <label
-    class="fui-Checkbox"
+    class="fui-Label fui-Checkbox"
   >
     <div
       class=""
@@ -70,7 +70,7 @@ exports[`Checkbox renders checked correctly 1`] = `
 exports[`Checkbox renders mixed correctly 1`] = `
 <div>
   <label
-    class="fui-Checkbox"
+    class="fui-Label fui-Checkbox"
   >
     <div
       class=""
@@ -107,7 +107,7 @@ exports[`Checkbox renders mixed correctly 1`] = `
 exports[`Checkbox renders unchecked correctly 1`] = `
 <div>
   <label
-    class="fui-Checkbox"
+    class="fui-Label fui-Checkbox"
   >
     <div
       class=""
diff --git a/packages/react-label/etc/react-label.api.md b/packages/react-label/etc/react-label.api.md
index 26000f83d24c29..7304171e5cd8f7 100644
--- a/packages/react-label/etc/react-label.api.md
+++ b/packages/react-label/etc/react-label.api.md
@@ -14,6 +14,9 @@ import * as React_2 from 'react';
 // @public
 export const Label: ForwardRefComponent<LabelProps>;
 
+// @public (undocumented)
+export const labelClassName = "fui-Label";
+
 // @public
 export type LabelCommons = {
     disabled: boolean;
diff --git a/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap b/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap
index 629f561e3655d3..1b098457ff8355 100644
--- a/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap
+++ b/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Label renders a custom asterisk 1`] = `
 <body>
   <div>
     <label
-      class=""
+      class="fui-Label"
       data-testid="label-id"
     >
       I'm a label
@@ -21,7 +21,7 @@ exports[`Label renders a custom asterisk 1`] = `
 exports[`Label renders a default state 1`] = `
 <div>
   <label
-    class=""
+    class="fui-Label"
   >
     Default Label
   </label>
diff --git a/packages/react-label/src/components/Label/useLabelStyles.ts b/packages/react-label/src/components/Label/useLabelStyles.ts
index 419da06f93dfa4..deb2c783d4fb4d 100644
--- a/packages/react-label/src/components/Label/useLabelStyles.ts
+++ b/packages/react-label/src/components/Label/useLabelStyles.ts
@@ -1,6 +1,8 @@
 import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import type { LabelState } from './Label.types';
 
+export const labelClassName = 'fui-Label';
+
 /**
  * Styles for the label
  */
@@ -46,6 +48,7 @@ const useStyles = makeStyles({
 export const useLabelStyles = (state: LabelState): LabelState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
+    labelClassName,
     styles.root,
     state.disabled && styles.disabled,
     styles[state.size],
diff --git a/packages/react-switch/Spec.md b/packages/react-switch/Spec.md
index 4f23eeb98e96d8..bf09b5aac0a6fe 100644
--- a/packages/react-switch/Spec.md
+++ b/packages/react-switch/Spec.md
@@ -86,10 +86,10 @@ Amongst other major component libraries (`Material UI`, `Ant Design`, `Evergreen
 - _**DOM**_
 
 ```jsx=
-<div className="ms-switch-root">
-  <div className="ms-switch-track" />
-  <div className="ms-switch-thumbWrapper">
-    <div className="ms-switch-thumb" />
+<div className="fui-Switch">
+  <div className="fui-Switch-track" />
+  <div className="fui-Switch-thumbWrapper">
+    <div className="fui-Switch-thumb" />
   </div>
   <input type="checkbox" />
 </div>;
diff --git a/packages/react-switch/etc/react-switch.api.md b/packages/react-switch/etc/react-switch.api.md
index 3edfff298c3442..aa0280d5056a82 100644
--- a/packages/react-switch/etc/react-switch.api.md
+++ b/packages/react-switch/etc/react-switch.api.md
@@ -16,6 +16,9 @@ export const renderSwitch: (state: SwitchState) => JSX.Element;
 // @public
 export const Switch: ForwardRefComponent<SwitchProps>;
 
+// @public (undocumented)
+export const switchClassName = "fui-Switch";
+
 // @public (undocumented)
 export interface SwitchCommons {
     checked?: boolean;
diff --git a/packages/react-switch/src/Switch.stories.tsx b/packages/react-switch/src/Switch.stories.tsx
index fdc4b7ee0cf57b..74776ba952b1b4 100644
--- a/packages/react-switch/src/Switch.stories.tsx
+++ b/packages/react-switch/src/Switch.stories.tsx
@@ -19,19 +19,19 @@ const useIosStyles = makeStyles({
     width: '50px',
     height: '30px',
 
-    ':hover .ms-Switch-thumb': {
+    ':hover .fui-Switch-thumb': {
       ':before': {
         background: 'white',
       },
     },
 
-    ':active .ms-Switch-thumb': {
+    ':active .fui-Switch-thumb': {
       ':before': {
         background: 'white',
       },
     },
 
-    ':hover .ms-Switch-track': {
+    ':hover .fui-Switch-track': {
       // Unchecked
       ':before': {
         borderColor: 'none',
@@ -43,7 +43,7 @@ const useIosStyles = makeStyles({
       },
     },
 
-    ':active .ms-Switch-track': {
+    ':active .fui-Switch-track': {
       ':before': {
         borderColor: 'none',
       },
@@ -92,7 +92,7 @@ const useMaterialStyles = makeStyles({
     width: '34px',
     height: '14px',
 
-    ':hover .ms-Switch-thumb': {
+    ':hover .fui-Switch-thumb': {
       ':before': {
         background: 'white',
       },
@@ -101,7 +101,7 @@ const useMaterialStyles = makeStyles({
       },
     },
 
-    ':hover .ms-Switch-track': {
+    ':hover .fui-Switch-track': {
       ':before': {
         background: '#9f9f9f',
       },
@@ -111,7 +111,7 @@ const useMaterialStyles = makeStyles({
       },
     },
 
-    ':active .ms-Switch-track': {
+    ':active .fui-Switch-track': {
       ':before': {
         background: '#9f9f9f',
       },
diff --git a/packages/react-switch/src/components/Switch/__snapshots__/Switch.test.tsx.snap b/packages/react-switch/src/components/Switch/__snapshots__/Switch.test.tsx.snap
index 2ae502bf0c51c5..35f29a5dc8fa9a 100644
--- a/packages/react-switch/src/components/Switch/__snapshots__/Switch.test.tsx.snap
+++ b/packages/react-switch/src/components/Switch/__snapshots__/Switch.test.tsx.snap
@@ -3,18 +3,18 @@
 exports[`Switch Snapshot Tests renders a basic Switch checked 1`] = `
 <div>
   <div
-    class="ms-Switch-root checked"
+    class="fui-Switch checked"
     id="switch-1"
   >
     <div
-      class="ms-Switch-track"
+      class="fui-Switch-track"
     />
     <div
       class=""
       style="transform: translate(100%); transition: transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1);"
     >
       <div
-        class="ms-Switch-thumb"
+        class="fui-Switch-thumb"
       />
     </div>
     <input
@@ -34,18 +34,18 @@ exports[`Switch Snapshot Tests renders a basic Switch checked 1`] = `
 exports[`Switch Snapshot Tests renders a basic Switch unchecked 1`] = `
 <div>
   <div
-    class="ms-Switch-root"
+    class="fui-Switch"
     id="switch-1"
   >
     <div
-      class="ms-Switch-track"
+      class="fui-Switch-track"
     />
     <div
       class=""
       style="transform: translate(0%); transition: transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1);"
     >
       <div
-        class="ms-Switch-thumb"
+        class="fui-Switch-thumb"
       />
     </div>
     <input
@@ -64,18 +64,18 @@ exports[`Switch Snapshot Tests renders a basic Switch unchecked 1`] = `
 exports[`Switch Snapshot Tests renders a disabled Switch checked 1`] = `
 <div>
   <div
-    class="ms-Switch-root checked"
+    class="fui-Switch checked"
     id="switch-1"
   >
     <div
-      class="ms-Switch-track"
+      class="fui-Switch-track"
     />
     <div
       class=""
       style="transform: translate(100%); transition: transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1);"
     >
       <div
-        class="ms-Switch-thumb"
+        class="fui-Switch-thumb"
       />
     </div>
     <input
@@ -95,18 +95,18 @@ exports[`Switch Snapshot Tests renders a disabled Switch checked 1`] = `
 exports[`Switch Snapshot Tests renders a disabled Switch unchecked 1`] = `
 <div>
   <div
-    class="ms-Switch-root"
+    class="fui-Switch"
     id="switch-1"
   >
     <div
-      class="ms-Switch-track"
+      class="fui-Switch-track"
     />
     <div
       class=""
       style="transform: translate(0%); transition: transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1);"
     >
       <div
-        class="ms-Switch-thumb"
+        class="fui-Switch-thumb"
       />
     </div>
     <input
diff --git a/packages/react-switch/src/components/Switch/useSwitchStyles.ts b/packages/react-switch/src/components/Switch/useSwitchStyles.ts
index c90e8d76b07e35..bb2ac1ab2442eb 100644
--- a/packages/react-switch/src/components/Switch/useSwitchStyles.ts
+++ b/packages/react-switch/src/components/Switch/useSwitchStyles.ts
@@ -2,9 +2,9 @@ import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import type { SwitchState } from './Switch.types';
 
-const rootClassName = 'ms-Switch-root';
-const trackClassName = 'ms-Switch-track';
-const thumbClassName = 'ms-Switch-thumb';
+export const switchClassName = 'fui-Switch';
+const trackClassName = `${switchClassName}-track`;
+const thumbClassName = `${switchClassName}-thumb`;
 
 /**
  * Styles for the root slot
@@ -27,13 +27,13 @@ const useRootStyles = makeStyles({
   }),
 
   unchecked: theme => ({
-    ':hover .ms-Switch-thumb': {
+    [`:hover .${thumbClassName}`]: {
       ':before': {
         background: theme.colorNeutralStrokeAccessibleHover,
       },
     },
 
-    ':hover .ms-Switch-track': {
+    [`:hover .${trackClassName}`]: {
       ':before': {
         borderColor: theme.colorNeutralStrokeAccessibleHover,
       },
@@ -41,13 +41,13 @@ const useRootStyles = makeStyles({
   }),
 
   checked: theme => ({
-    ':hover .ms-Switch-track': {
+    [`:hover .${trackClassName}`]: {
       ':after': {
         background: theme.colorBrandBackgroundHover,
       },
     },
 
-    ':active .ms-Switch-track': {
+    [`:active .${trackClassName}`]: {
       ':after': {
         background: theme.colorBrandBackgroundPressed,
       },
@@ -254,7 +254,7 @@ export const useSwitchStyles = (state: SwitchState): SwitchState => {
   const inputStyles = useInputStyle();
 
   state.root.className = mergeClasses(
-    rootClassName + (checked ? ' checked' : ''),
+    switchClassName + (checked ? ' checked' : ''),
     rootStyles.root,
     rootStyles.focusIndicator,
     !disabled && rootStyles.checked,
