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?
Advertisement
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>