Prevent React from displaying props meant for Styled-components?

Question

I use Styled-Components with React.

My code looks like this:

const StyledLink = styled.a<StyledProps>`
  font-size: ${(props) => pxToRem(props.fontSize!)};

  //disabled state
  ${(props) =>
    props.disabled &&
    css`
      color: grey;
      pointer-events: none;
    `}
`
const Link = ({href, disabled, fontSize = 16, children}: Props) => {
  return(
    <StyledLink href={href} fontSize={fontSize} disabled={disabled}>{children}</StyledLink>
  )
}

Everything works fine, however when I inspect my elements I see:

<a href="#" font-size="16" disabled>Some Link</a>

I want fontSize and disabled to be props that target only Styled-Components. I don't want them to applied for React element. Is there a better way of doing that without changing props names to something like styledFontSize and styledDisabled?

Answer 1

styled-components provides transient props for those who wants to avoid property passing down to DOM or React node where the property name should have $ (dollar sign) prefix.

Using $ transient props:

const StyledLink = styled.a<StyledProps>`
  font-size: ${(props) => pxToRem(props.$fontSize!)};

  //disabled state
  ${(props) =>
    props.$disabled &&
    css`
      color: grey;
      pointer-events: none;
    `}
`

const Link = ({href, disabled, fontSize = 16, children}: Props) => {
  return(
    <StyledLink href={href} $fontSize={fontSize} $disabled={disabled}>{children}</StyledLink>
  )
}