Как настроить ссылку на styled компонент TableRow в material ui

Рейтинг: 0Ответов: 0Опубликовано: 07.03.2023

У меня есть styled компонент TableRow из mui

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  color: theme.palette.text.secondary,
  '&:hover': {
    background: theme.palette.action.hover,
    cursor: 'pointer',
  },
}));

Так же внизу я отрендериваю этот компонент, то есть беру массив данных и рендерю каждый элемент массива как строку в таблице

  {data?.map(row => (
    <StyledTableRow key={row.job_id}>
      <TableCell>
        <Box
          sx={{
            display: 'flex',
            maxWidth: '300',
          }}
        >
          <Image
            width={24}
            height={24}
            src={
              instruments.find(el => el.configName === row.tool)?.icon
            }
            alt="toolInfoIcon"
          />
          <Box sx={{ ml: 1 }} className={styles.toolName}>
            {
              comparisonNames().find(el => el.CONFIG_NAME === row.tool)
                ?.visibleName
            }
          </Box>
        </Box>
        <Box sx={{ mt: 1 }} className={styles.decription}>
          {row.description}
        </Box>
      </TableCell>

      <TableCell>
        <Tooltip
          title={intl.get('DOWNLOAD_RESULT')}
          placement="top-end"
        >
          <Button
            sx={{ color: 'action.active' }}
            onClick={e => {
              e.preventDefault();
              download(row);
            }}
          >
            <DownloadIcon />
          </Button>
        </Tooltip>
        <Tooltip title={intl.get('COPY_LINK')} placement="top-end">
          <CopyToClipboardButton job_id={row.job_id} />
        </Tooltip>
      </TableCell>
    </StyledTableRow>
  ))}

Теперь вопрос: мне нужно чтобы по клику на строку меня редайректило на другую страницу, то есть мне нужен либо href либо Link to.. либо что-то еще, я бы мог наверное указать у <TableRow component={Link} to='https://....' но мне нужен имеено StyledTableRow, можно ли как-нибудь к нему прицепить хотя бы какой-нибудь router.push(...) это я кст тоже пробовал типо вот так

<StyledTableRow onClick={router.push('')} key={row.job_id}>

но onClick подчеркивается красный с такой ошибкой "Type 'Promise' is not assignable to type 'MouseEventHandler'" и почему-то onClick срабатывает сразу при заходе на страницу, а не после клика по строке

Ответы

Ответов пока нет.