How to change TR HOVER COLOR in TABLE?

[phantodev]

Hello guys... i tried everything to change my TR HOVER COLOR in in TABLE COMPONENT... Could you help me?

classNames={{
th: "dark:bg-dark dark:text-white",
tr: "hover:bg-red-500" // for example
}}

But i can see a red color and another gray overlay over my red color :-(

If you know of a way for me to change this globally in all my tables I would love it. Maybe some theme configuration for the table in general.

Thank you so much guys

[alphaxek]

Hi @phantodev, you want to change the text color or background color?

[Crackvignoule]

Hi, I have exactly the same issue, I want to change hover color on rows but I can't override the default one...

[MarcusDelvecchio]

same issue here, any solutions?

[AnYiEE]

Because this style is on each td by default, it is group-aria-[selected=false]:group-data-[hover=true]:before:bg-default-100 group-aria-[selected=false]:group-data-[hover=true]:before:opacity-70.

[erickmoore]

@phantodev you are likely seeing those corners because the TableCell (td) also needs to be rounded when you are overwriting the style:

<TableRow
     key={item.key}
      className="hover:bg-blue-500 dark:hover:bg-blue-500 first:rounded-l-lg last:rounded-r-lg">
              {(columnKey: string | number) => (
                <TableCell className="first:rounded-l-lg last:rounded-r-lg">
                  {renderCell(item, columnKey)}
                </TableCell>
              )}
</TableRow>