pass styles directly to trailed elements

xylabs · Jan 2, 2025 · c016ed8 · c016ed8
1 parent fd85441
commit c016ed8
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/packages/animation/src/Trail.tsx b/packages/animation/src/Trail.tsx
@@ -1,15 +1,17 @@
 import type { BoxProps } from '@mui/material'
 import { Box } from '@mui/material'
 import { a, useTrail } from '@react-spring/web'
+import type { CSSProperties } from 'react'
 import React, { isValidElement } from 'react'
 
 export interface TrailProps extends BoxProps {
   fullWidth?: boolean
   open: boolean
+  trailStyles?: CSSProperties
 }
 
 export const Trail: React.FC<TrailProps> = ({
-  fullWidth, open, children, ...props
+  fullWidth, open, trailStyles, children, ...props
 }) => {
   // Ensure children is an array for iteration
   const childArray = isValidElement(children) ? [children] : (children as React.ReactNode[])
@@ -32,7 +34,9 @@ export const Trail: React.FC<TrailProps> = ({
         <a.div
           className={`trail-${index}`}
           key={childArrayWithKey[index].key}
-          style={{ ...style, display: 'flex' }}
+          style={{
+            ...trailStyles, ...style, display: 'flex',
+          }}
         >
           {childArrayWithKey[index].child}
         </a.div>