CSS issue with hover/select on table rows

[kmurari103]

Hi there,
I am upgrading "@itwin/itwinui-react": "^1.34.0" to "@itwin/itwinui-react": "^1.42.0".
But noticed that there is some css issue after upgrading the package. On hover effect as well as on selecting row in table- the background color overrides the cell having different color. This was not happening with 1.34.0 package version.
Anything i'm missing here?

[bentleyvk]

We made some changes in CSS that moved row hover, select background to cell. I think now our CSS specificity is higher than yours. So solution right now would be for you to increase specificity of your CSS.

[kmurari103]

Thanks for the quick reply @bentleyvk

How can i increase specificity of my CSS? I'm basically assigning the css background programmatically while defining the column for <Table> component like this...

getCellColors() here returns the background and font color based on some checks and i use that to define style for this particular cell.

                    .
                    .
                    {
                        Header: Status,
                        accessor: "lastStatus",
                        id: "status",
                        fieldType: "text",
                        maxWidth: 105,
                        Cell: (props: any) => {
                            const { backgroundColor, color } = props.row.original.getCellColors();
                            return (
                                <div className="iot-status-cell" style={{ backgroundColor, color }}>
                                    {props.row.original.lastStatus}
                                </div>
                            );
                        },
                    },
                    .
                    .