a way to change bottom navigator BottomNamItem span's hover color

[ama-coder]

for example in in this code:
<BottomNav {activeUrl} position="absolute" classInner="grid-cols-4 md:hidden" classActive="font-bold text-green-600 hover:text-primary-200" > <BottomNavItem btnName="Home" href="/" > <HomeSolid /> </BottomNavItem> <BottomNavItem btnName="Quickstart" href="/docs/pages/quickstart"> <WalletSolid /> </BottomNavItem> <BottomNavItem btnName="BottomNav" href="/docs/components/bottom-navigation"> <AdjustmentsVerticalOutline /> </BottomNavItem> <BottomNavItem btnName="Accordion" href="/docs/components/accordion"> <UserCircleSolid /> </BottomNavItem> </BottomNav>

with changing the hover:text in classinner only the icons color will change, and the spans text from btnName remains the same

[shinokada]

Use spanClass prop to overwrite CSS.

[ama-coder]

Thank you

[evancaldwell]

There is a problem with this if you want to style the span when the bottom nav button is active.
If I have:

<BottomNav {activeUrl}
    classOuter="bg-blue text-red"
    classInner="grid-cols-3" 
    classActive="text-white">
    <BottomNavItem btnName="Home"
      btnClass="hover:bg-blue hover:text-white"
      spanClass="text-red group-hover:text-white">
      <CalendarMonthSolid class="mb-2" />
    </BottomNavItem>
    ...
</BottomNav>

Then the span on a non-active button will be correct (red) but on the active button it will be wrong (red instead of white).

If instead I have:

<BottomNav {activeUrl}
    classOuter="bg-blue text-red"
    classInner="grid-cols-3" 
    classActive="text-white">
    <BottomNavItem btnName="Home"
      btnClass="hover:bg-blue hover:text-white">
      <CalendarMonthSolid class="mb-2" />
    </BottomNavItem>
    ...
</BottomNav>

Then the span on a non-active or hovered button will be incorrect (default grey) but on the active button it will be correct (white).

Does anyone know how to solve this?