[BUG] - Table with stripped and color bug when using selection mode

[szbphoto]

NextUI Version

2.1.12

Describe the bug

When I use the Table componenet, set the table to stripped and then add a color="primary" then in the selection the stripped ones not color correctly

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Add a Table component
2. Add selectionMode="multiple"
3. Add selectionBehavior="toggle"
4. Add color={"primary"}
5. Add isStriped

And you are done

Expected behavior

I expected that the stripped ones also get the correct color just like the not stripped ones

Screenshots or Videos

Operating System Version

Windows

Browser

Chrome

[iPachDev]

the last release (2.1.12) does not resolve the issue :/, thanks

[gabosdk]

Same Here, I notice that bug with isStriped active.

[stosh15x]

The root cause is that the striped classes are being added after the selection classes.

<td tabindex="0" data-key="3232created" role="gridcell" class="py-2 px-3 relative align-middle whitespace-normal text-small font-normal [&amp;>*]:z-1 [&amp;>*]:relative outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 before:content-[''] before:absolute before:z-0 before:inset-0 before:opacity-0 data-[selected=true]:before:opacity-100 group-data-[disabled=true]:text-foreground-300 before:bg-primary/20 data-[selected=true]:text-primary group-data-[odd=true]:before:bg-default-100 group-data-[odd=true]:before:opacity-100 group-aria-[selected=false]:group-data-[hover=true]:before:bg-default-100 group-aria-[selected=false]:group-data-[hover=true]:before:opacity-70 first:before:rounded-l-lg last:before:rounded-r-lg" data-selected="true"><div class="flex flex-col"><p class="">test</p></div></td>

.group[data-odd=true] .group-data-\[odd\=true\]\:before\:bg-default-100::before { content: var(--tw-content); --tw-bg-opacity: 1; background-color: hsl(var(--nextui-default-100) / var(--nextui-default-100-opacity, var(--tw-bg-opacity))); }

.before\:bg-primary\/20::before { content: var(--tw-content); background-color: hsl(var(--nextui-primary) / 0.2); }

if there was a data-[selected=true]:before:bg-primary added then it would take priority

[sjoerdvanBommel]

I'll take a look at this one as my first issue :)

[wingkwong]

@visak2614 please check out other issues instead. There is a linked PR already, which means someone may already fix it.