Prevent React from displaying props meant for Styled-components? - reactjs

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>
)
}