mui table сделать ховер по ячейкам

У меня есть таблица mui В ней есть сверху (как бы шапка таблицы) названия (для примера "headername1, headername2, headername3") Также слева есть колонка с другими названиями (leftName1,leftName2,leftName3,) на пересечении этих имен есть иконки, иноки там разные, как раз эти имена и сравниваются и в зависимости от входных данных я показываю красную иконку или зеленую или желтую, мне нужно сделать такой ховер, чтобы при наведении на иконку ховером выделялись и headername1 и leftName1, то есть не только сама иконка на которую навел, а еще и её названия в шапке и в боковом меню

 <Table sx={{ minWidth: 650 }} size='small'>
                <TableHead>
                    <TableRow>
                        {forHeader.map((el, key) => (
                            <TableCellStyled sx={{ writingMode: 'vertical-lr' }} key={key}>
                                {key !== 0 && (
                                    <React.Fragment>
                                        <CircleIconStyled color={el.color} />
                                        <Typography variant='caption'>{el.value}</Typography>
                                    </React.Fragment>
                                )}
                            </TableCellStyled>
                        ))}
                    </TableRow>
                </TableHead>
                <TableBody>
                    {subArraysWithFirstElement.map((row, key) => (
                        <TableRow key={key}>
                            {(row as any).map((el, id) => {
                                if (id === 0) {
                                    return (
                                        // TODO: Rename
                                        <TableCellStyledd key={id}>
                                            <CircleIconStyled color={el.color} />
                                            <Typography paddingLeft='4px' variant='caption'>
                                                {el.value}
                                            </Typography>
                                        </TableCellStyledd>
                                    );
                                }
                                return <TableCellIconStyled key={key}>{getIcon(el)}</TableCellIconStyled>;
                            })}
                        </TableRow>
                    ))}
                </TableBody>
  </Table>

Может хотябы идеи будут какие-нибудь?


Ответы (1 шт):

Автор решения: Hrenmorzhovyi

сделал вот так, работает:

export const TableCellIconStyled = styled(TableCell, {
    shouldForwardProp: (props) => props !== 'hoverColor',
})<TableCellIconStyledProps>(({ hoverColor, theme: { palette, spacing } }) => ({
    height: spacing(5.5),
    width: spacing(5.5),
    maxWidth: spacing(5.5),
    padding: 0,
    borderBottom: 'none',
    border: `1px solid ${palette.other.divider}`,
    position: 'relative',
    '&:hover::after': {
        pointerEvents: 'none',
        bottom: 44,
        content: '""',
        backgroundColor:
            hoverColor === 'isFailure'
                ? palette.warning.outlinedHoverBackground
                : hoverColor === 'isParallel'
                ? palette.action.selected
                : hoverColor === 'isNotParallel'
                ? palette.error.outlinedHoverBackground
                : 'none',
        position: 'absolute',
        height: '100vh',
        width: '100%',
    },
    '&:hover::before': {
        pointerEvents: 'none',
        right: 0,
        content: '""',
        backgroundColor:
            hoverColor === 'isFailure'
                ? palette.warning.outlinedHoverBackground
                : hoverColor === 'isParallel'
                ? palette.action.selected
                : hoverColor === 'isNotParallel'
                ? palette.error.outlinedHoverBackground
                : 'none',
        position: 'absolute',
        height: '100%',
        width: '100vw',
    },
}));
→ Ссылка