React Link component spans the entire width of the div

I have a react Link component that contains a custom Button component that I made. The Link component’s width automatically set to fit it’s parent div making areas clickable that shouldn’t be. I messed with the code and had the idea to put the Link into a Span resulting in this code.

<span><Link to="/"><Button buttonStyle="primary">Create Account</Button></Link></span>

This worked perfectly but I only sort of understand why. Can someone explain this in full? Why did this fix the clickable area for the Link and button components?

Answer

Link renders a <a> tag which by default doesnt contain the content inside of it. SO when you are placing a button, I believe the button is styled as display: block. So the button is displayed as blocked element relative to the parent of the <a> tag. Set the style of the link to display: inline-block. In that case, the tag will contain the button and also will be in inline block element relative to its parent.

<Link to="/" style={{display: 'inline-block'}}>
    <Button buttonStyle="primary">Create Account</Button>
  </Link>