From c016ed83c25a5604c2bf9c032c10257d9085a4f8 Mon Sep 17 00:00:00 2001
From: Matt Jones <885417+jonesmac@users.noreply.github.com>
Date: Thu, 2 Jan 2025 14:36:07 -0500
Subject: [PATCH] pass styles directly to trailed elements

---
 packages/animation/src/Trail.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/animation/src/Trail.tsx b/packages/animation/src/Trail.tsx
index f8ddd75d..b0313b5d 100644
--- 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>