createLink causes weird behavior with component?

I've built a table row that I have also wrapped up in a

createLink

createLink

. Felt like a great idea at first to help me distribute the type safety of the router on a component that I'd like to link to another page. But it causes this weird behavior with the styles.

How do I stop it from doing that?

const ProjectionRow = forwardRef<HTMLDivElement, Projection>(
  ({ name, created_at, ...props }, ref) => {
    return (
      <TableRow
        ref={ref}
        className="p-3"
        containerClassName="last:border-b cursor-pointer"
        {...props}
      >
        <TableCell className="flex items-center typography-label-sm">
          {name}
        </TableCell>
        <TableCell className="flex items-center text-text-sub typography-paragraph-sm">
          {format(created_at, 'MM/dd/yyyy')}
          <ChevronRight className="ml-auto h-5 w-5" />
        </TableCell>
      </TableRow>
    )
  },
)

const ProjectionRowLink = createLink(ProjectionRow)

const ProjectionRow = forwardRef<HTMLDivElement, Projection>(
  ({ name, created_at, ...props }, ref) => {
    return (
      <TableRow
        ref={ref}
        className="p-3"
        containerClassName="last:border-b cursor-pointer"
        {...props}
      >
        <TableCell className="flex items-center typography-label-sm">
          {name}
        </TableCell>
        <TableCell className="flex items-center text-text-sub typography-paragraph-sm">
          {format(created_at, 'MM/dd/yyyy')}
          <ChevronRight className="ml-auto h-5 w-5" />
        </TableCell>
      </TableRow>
    )
  },
)

const ProjectionRowLink = createLink(ProjectionRow)

TanStack•2y ago•

4 replies

moderate-tomato

createLink causes weird behavior with component?

I've built a table row that I have also wrapped up in a

createLink

createLink

const ProjectionRow = forwardRef<HTMLDivElement, Projection>(
  ({ name, created_at, ...props }, ref) => {
    return (
      <TableRow
        ref={ref}
        className="p-3"
        containerClassName="last:border-b cursor-pointer"
        {...props}
      >
        <TableCell className="flex items-center typography-label-sm">
          {name}
        </TableCell>
        <TableCell className="flex items-center text-text-sub typography-paragraph-sm">
          {format(created_at, 'MM/dd/yyyy')}
          <ChevronRight className="ml-auto h-5 w-5" />
        </TableCell>
      </TableRow>
    )
  },
)

const ProjectionRowLink = createLink(ProjectionRow)

const ProjectionRow = forwardRef<HTMLDivElement, Projection>(
  ({ name, created_at, ...props }, ref) => {
    return (
      <TableRow
        ref={ref}
        className="p-3"
        containerClassName="last:border-b cursor-pointer"
        {...props}
      >
        <TableCell className="flex items-center typography-label-sm">
          {name}
        </TableCell>
        <TableCell className="flex items-center text-text-sub typography-paragraph-sm">
          {format(created_at, 'MM/dd/yyyy')}
          <ChevronRight className="ml-auto h-5 w-5" />
        </TableCell>
      </TableRow>
    )
  },
)

const ProjectionRowLink = createLink(ProjectionRow)

createLink causes weird behavior with component?

Similar Threads

createLink causes weird behavior with component?

Similar Threads

Similar Threads

Similar Threads