diff --git a/packages/react/src/resolver/getComponentStyle.ts b/packages/react/src/resolver/getComponentStyle.ts
index 031af8cbf..33fe8e3b2 100644
--- a/packages/react/src/resolver/getComponentStyle.ts
+++ b/packages/react/src/resolver/getComponentStyle.ts
@@ -3,8 +3,8 @@ import type { OrderedSXResolved } from '../types';
 export function getComponentResolvedBaseStyle(
   orderedResolved: OrderedSXResolved
 ) {
-  const componentOrderResolvedBaseStyle: Array<any> = [];
-  const componentOrderResolvedBaseStateStyle: Array<any> = [];
+  const componentOrderResolvedBaseStyle: OrderedSXResolved = [];
+  const componentOrderResolvedBaseStateStyle: OrderedSXResolved = [];
 
   orderedResolved &&
     orderedResolved.forEach((item: any) => {
@@ -31,8 +31,8 @@ export function getComponentResolvedBaseStyle(
 export function getComponentResolvedVariantStyle(
   orderedResolved: OrderedSXResolved
 ) {
-  const componentOrderResolvedVariantStyle: Array<any> = [];
-  const componentOrderResolvedVariantStateStyle: Array<any> = [];
+  const componentOrderResolvedVariantStyle: OrderedSXResolved = [];
+  const componentOrderResolvedVariantStateStyle: OrderedSXResolved = [];
 
   orderedResolved &&
     orderedResolved.forEach((item: any) => {
@@ -57,8 +57,8 @@ export function getComponentResolvedVariantStyle(
 export function getDescendantResolvedBaseStyle(
   orderedResolved: OrderedSXResolved
 ) {
-  const descendantOrderResolvedBaseStyle: Array<any> = [];
-  const descendantOrderResolvedBaseStateStyle: Array<any> = [];
+  const descendantOrderResolvedBaseStyle: OrderedSXResolved = [];
+  const descendantOrderResolvedBaseStateStyle: OrderedSXResolved = [];
 
   orderedResolved &&
     orderedResolved.forEach((item: any) => {
@@ -85,8 +85,8 @@ export function getDescendantResolvedBaseStyle(
 export function getDescendantResolvedVariantStyle(
   orderedResolved: OrderedSXResolved
 ) {
-  const descendantOrderResolvedVariantStyle: Array<any> = [];
-  const descendantOrderResolvedVariantStateStyle: Array<any> = [];
+  const descendantOrderResolvedVariantStyle: OrderedSXResolved = [];
+  const descendantOrderResolvedVariantStateStyle: OrderedSXResolved = [];
 
   orderedResolved &&
     orderedResolved.forEach((item: any) => {
diff --git a/packages/react/src/resolver/injectComponentAndDescendantStyles.ts b/packages/react/src/resolver/injectComponentAndDescendantStyles.ts
index 1edba3792..c51bc5db9 100644
--- a/packages/react/src/resolver/injectComponentAndDescendantStyles.ts
+++ b/packages/react/src/resolver/injectComponentAndDescendantStyles.ts
@@ -12,36 +12,56 @@ export function injectComponentAndDescendantStyles(
   styleTagId?: string,
   type: 'boot' | 'inline' = 'boot'
 ) {
-  const componentOrderResolvedBaseStyle =
-    getComponentResolvedBaseStyle(orderedResolved);
-  const componentOrderResolvedVariantStyle =
-    getComponentResolvedVariantStyle(orderedResolved);
+  const [
+    componentOrderResolvedBaseStyle,
+    componentOrderResolvedBaseStateStyle,
+  ] = getComponentResolvedBaseStyle(orderedResolved);
+  const [
+    componentOrderResolvedVariantStyle,
+    componentOrderResolvedVariantStateStyle,
+  ] = getComponentResolvedVariantStyle(orderedResolved);
 
-  const descendantOrderResolvedBaseStyle =
-    getDescendantResolvedBaseStyle(orderedResolved);
-  const descendantOrderResolvedVariantStyle =
-    getDescendantResolvedVariantStyle(orderedResolved);
+  const [
+    descendantOrderResolvedBaseStyle,
+    descendantOrderResolvedBaseStateStyle,
+  ] = getDescendantResolvedBaseStyle(orderedResolved);
+  const [
+    descendantOrderResolvedVariantStyle,
+    descendantOrderResolvedVariantStateStyle,
+  ] = getDescendantResolvedVariantStyle(orderedResolved);
 
   const componentOrderResolvedBaseStyleIds = GluestackStyleSheet.declare(
-    componentOrderResolvedBaseStyle,
+    [
+      ...componentOrderResolvedBaseStyle,
+      ...componentOrderResolvedBaseStateStyle,
+    ],
     type + '-base',
     styleTagId ? styleTagId : 'css-injected-boot-time',
     false
   );
   const descendantOrderResolvedBaseStyleIds = GluestackStyleSheet.declare(
-    descendantOrderResolvedBaseStyle,
+    [
+      ...descendantOrderResolvedBaseStyle,
+      ...descendantOrderResolvedBaseStateStyle,
+    ],
     type + '-descendant-base',
     styleTagId ? styleTagId : 'css-injected-boot-time-descendant',
     {}
   );
   const componentOrderResolvedVariantStyleIds = GluestackStyleSheet.declare(
-    componentOrderResolvedVariantStyle,
+    [
+      ...componentOrderResolvedVariantStyle,
+      ...componentOrderResolvedVariantStateStyle,
+    ],
     type + '-variant',
     styleTagId ? styleTagId : 'css-injected-boot-time',
     {}
   );
   const descendantOrderResolvedVariantStyleIds = GluestackStyleSheet.declare(
-    descendantOrderResolvedVariantStyle,
+    [
+      ...descendantOrderResolvedVariantStyle,
+      ...descendantOrderResolvedVariantStateStyle,
+    ],
     type + '-descendant-variant',
     styleTagId ? styleTagId : 'css-injected-boot-time-descendant',
     {}