diff --git a/change/@fluentui-babel-make-styles-e24db7df-1613-42dd-aa1a-a4ddb5b85b83.json b/change/@fluentui-babel-make-styles-e24db7df-1613-42dd-aa1a-a4ddb5b85b83.json
new file mode 100644
index 00000000000000..70e33672468ce5
--- /dev/null
+++ b/change/@fluentui-babel-make-styles-e24db7df-1613-42dd-aa1a-a4ddb5b85b83.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: handle computed keys on objects",
+  "packageName": "@fluentui/babel-make-styles",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/babel-make-styles/__fixtures__/function-imported-keys/code.ts b/packages/babel-make-styles/__fixtures__/function-imported-keys/code.ts
new file mode 100644
index 00000000000000..0b5675dd5f7eeb
--- /dev/null
+++ b/packages/babel-make-styles/__fixtures__/function-imported-keys/code.ts
@@ -0,0 +1,11 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { className, color, selector } from './consts';
+
+export const useStyles = makeStyles({
+  rootA: theme => ({
+    [selector]: { [color]: theme.colorBrandBackground },
+  }),
+  rootB: theme => ({
+    [`& .${className}`]: { color: theme.colorBrandBackground },
+  }),
+});
diff --git a/packages/babel-make-styles/__fixtures__/function-imported-keys/consts.ts b/packages/babel-make-styles/__fixtures__/function-imported-keys/consts.ts
new file mode 100644
index 00000000000000..5698a213d9f2d7
--- /dev/null
+++ b/packages/babel-make-styles/__fixtures__/function-imported-keys/consts.ts
@@ -0,0 +1,3 @@
+export const color = 'color';
+export const className = 'component-foo';
+export const selector = '& .component-bar';
diff --git a/packages/babel-make-styles/__fixtures__/function-imported-keys/output.ts b/packages/babel-make-styles/__fixtures__/function-imported-keys/output.ts
new file mode 100644
index 00000000000000..ffbfc1a29c41e1
--- /dev/null
+++ b/packages/babel-make-styles/__fixtures__/function-imported-keys/output.ts
@@ -0,0 +1,18 @@
+import { __styles } from '@fluentui/react-make-styles';
+import { className, color, selector } from './consts';
+export const useStyles = __styles(
+  {
+    rootA: {
+      B0egftl: 'felhwal',
+    },
+    rootB: {
+      qhv8v2: 'f17q1fco',
+    },
+  },
+  {
+    d: [
+      '.felhwal .component-bar{color:var(--colorBrandBackground);}',
+      '.f17q1fco .component-foo{color:var(--colorBrandBackground);}',
+    ],
+  },
+);
diff --git a/packages/babel-make-styles/__fixtures__/object-imported-keys/code.ts b/packages/babel-make-styles/__fixtures__/object-imported-keys/code.ts
new file mode 100644
index 00000000000000..c89e1ad8b4c939
--- /dev/null
+++ b/packages/babel-make-styles/__fixtures__/object-imported-keys/code.ts
@@ -0,0 +1,9 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { className, selector } from './consts';
+
+export const useStyles = makeStyles({
+  root: {
+    [selector]: { color: 'red' },
+    [`& .${className}`]: { color: 'blue' },
+  },
+});
diff --git a/packages/babel-make-styles/__fixtures__/object-imported-keys/consts.ts b/packages/babel-make-styles/__fixtures__/object-imported-keys/consts.ts
new file mode 100644
index 00000000000000..dce535c10d9975
--- /dev/null
+++ b/packages/babel-make-styles/__fixtures__/object-imported-keys/consts.ts
@@ -0,0 +1,2 @@
+export const className = 'component-foo';
+export const selector = '& .component-bar';
diff --git a/packages/babel-make-styles/__fixtures__/object-imported-keys/output.ts b/packages/babel-make-styles/__fixtures__/object-imported-keys/output.ts
new file mode 100644
index 00000000000000..b8b7e8cca19d0e
--- /dev/null
+++ b/packages/babel-make-styles/__fixtures__/object-imported-keys/output.ts
@@ -0,0 +1,13 @@
+import { __styles } from '@fluentui/react-make-styles';
+import { className, selector } from './consts';
+export const useStyles = __styles(
+  {
+    root: {
+      B0egftl: 'f1wgwx3x',
+      qhv8v2: 'fglt6ox',
+    },
+  },
+  {
+    d: ['.f1wgwx3x .component-bar{color:red;}', '.fglt6ox .component-foo{color:blue;}'],
+  },
+);
diff --git a/packages/babel-make-styles/src/plugin.ts b/packages/babel-make-styles/src/plugin.ts
index c4994072f49a71..eadbd45b22a5c6 100644
--- a/packages/babel-make-styles/src/plugin.ts
+++ b/packages/babel-make-styles/src/plugin.ts
@@ -217,8 +217,20 @@ function processDefinitions(
           }
 
           if (propertyPath.isObjectProperty()) {
+            const keyPath = propertyPath.get('key');
             const valuePath = propertyPath.get('value');
 
+            /**
+             * Computed properties may require lazy evaluation.
+             *
+             * @example
+             *    makeStyles({ [var]: { color: 'red' } })
+             *    makeStyles({ [`${var}`]: { color: SOME_VARIABLE } })
+             */
+            if (propertyPath.node.computed) {
+              lazyPaths.push(keyPath);
+            }
+
             if (valuePath.isStringLiteral() || valuePath.isNullLiteral() || valuePath.isNumericLiteral()) {
               return;
             }
@@ -315,7 +327,7 @@ function processDefinitions(
                 return;
               }
 
-              // This condition resolves "theme.alias.color.green.foreground1" to CSS variable
+              // This condition resolves "theme.aliasColorGreenForeground1" to CSS variable
               if (valuePath.isMemberExpression()) {
                 const identifierPath = getMemberExpressionIdentifier(valuePath);
                 const paramsName = paramsPath?.node.name;