如何将材质反应表固定列和所选行的透明度设置为“0”？

Question

我正在使用 Material React 表文本。 我为我的表启用了 rowSlection 和 columnPinning 选项。 默认情况下，固定列具有一定程度的透明度，我已使用以下方法覆盖该透明度：

muiTableBodyCellProps: ({ column, row }) => {
            return ({
                //conditionally style pinned columns
                sx: {
                    backgroundColor: column.getIsPinned() ? "white" : undefined,
                },
            })
        }

这工作得很好，但是一旦我选择了行，固定列的透明度就会增加，并且其下面的元素变得可见。 当我将鼠标悬停在该行上时，这一点变得更加明显。

当选择固定列并将其悬停在其上时，如何将其透明度设置为“0”？

muiTableBodyCellProps: ({ column, row }) => {
            return ({
                //conditionally style pinned columns
                sx: {
                    backgroundColor: column.getIsPinned() ? "white" : undefined,
                    // conditionally style column 
                    "&:hover": {
                        // backgroundColor: column.getIsPinned() && row.getIsSelected() ? "white" : undefined,
                        backgroundColor: "red",
                    }
                },
            })
        }

我尝试像这样定位悬停状态，但它什么也没做。

Answer 1

也许您更改了错误的背景颜色，看看这个：

sx: {
'td[data-pinned="true"]::before': { backgroundColor: 'inherit' },
},

通过禁用此功能，您无需担心固定列背景