T
TanStack•14mo ago
inland-turquoise

createLink causes weird behavior with component?

I've built a table row that I have also wrapped up in a 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)
3 Replies
inland-turquoise
inland-turquoiseOP•14mo ago
No description
extended-yellow
extended-yellow•14mo ago
can you please provide a complete minimal example?
inland-turquoise
inland-turquoiseOP•14mo ago
Hmm, I'm having trouble reproducing it outside my own project. Guess I'll just figure it out. thanks though For anyone else with this issue, it was because I was allowing the link props to overwrite the className on the original component. Had to merge it with a cn or twMerge function.

Did you find this page helpful?