We Keep Coding

<Link> not working in <Button> for next.js

Trying to have a wrapping around a that I created in my Navbar as below shows:
<NavBtn>
<Link href="/contact" passHref>
<Button>
Contact Me
</Button>
</Link>
</NavBtn>
Here is my custom Button.js
const StyledButton = styled.button`
height: 45px;
width: 130px;
background: #908db9;
border: none;
border-radius: 4px;
outline: none;
color: #fafafa;
font-size: 1.05rem;
font-weight: 500;
&:hover {
background: #b8b4f0;
}
`
const Button = ({ children }) => {
return <StyledButton><a onClick={() => console.log("clicked")}>{children}</a></StyledButton>
}
Basically, I cannot click the button like I normal behaviour. But I can't resolve where the issue is coming from :(
Please advise as I am a little lost in what I have done wrong. If need more information let me know!
Thanks in advance.

Just wrapped inside Extra Div it will solve the problem.
where are using button component

use styled-components to share styles between components/elements

I am using styled-components along with Gatsby. I used styled-components to style the Link component provided by Gatsby for my home page.
const HomePageLink = styled(Link)`
display: inline-block;
font-size: ${fontSizes.xxlarge};
text-decoration: none;
box-shadow: none;
:link,
:visited {
color: ${colors.slate};
}
:hover,
:active {
color: ${colors.red};
}
`
However I realize that I also need to style a plain html <a /> tag using the exactly same style. I wonder is there a way to make the style component above adapt to <a /> tags without duplicating the code like this
const HomePageAnchorTag = styled.a`
display: inline-block;
font-size: ${fontSizes.xxlarge};
text-decoration: none;
box-shadow: none;
:link,
:visited {
color: ${colors.slate};
}
:hover,
:active {
color: ${colors.red};
}
`

Yes, use css API which allows you to construct reusable CSS blocks.
A helper function to generate CSS from a template literal with interpolations.
import styled, { css } from 'styled-components';
const reusableCSS = css`
display: inline-block;
font-size: ${fontSizes.xxlarge};
text-decoration: none;
box-shadow: none;
:link,
:visited {
color: ${colors.slate};
}
:hover,
:active {
color: ${colors.red};
}
`;
const HomePageAnchorTag = styled.a`
${reusableCSS}
`;
const HomePageLink = styled(Link)`
${reusableCSS}
`;
Usually, you will notice a mixins.js file that contains exports of reusable css block, for example:
// mixins.js
const flexCenter = css`...`
export default { flexCenter };
// usage inside styled components.
${mixins.flexCenter}

How can I use multiple props in a single callback defined in a template literal in React styled-components

I have started using styled components in my React project a couple of days back and I am not able to use multiple props to defined styles in my components.
The gist of the problem goes like this:
const sizes = {
lg: css`
width: 200px;
height: 120px;
font-size: 22px;
`,
md: css`
width: 140px;
height: 80px;
font-size: 18px;
`
}
const getColor = (color)=>css`color: ${color}`
const MyComponent = styled.div`
max-width: 240px;
font-size: 12px;
color: '#ffffff';
${props=>getColor(props.color)}
${props=>sizes[props.size]}
`
....
<MyComponent color="blue" size="lg" ></MyComponent>
The issue is, every time I need to add an extra config(like color and size) for my component, I'll have to add another callback in template literal.
Is there a way to apply everything with a single line of code and not add separate callbacks?

styled also accepts a function that passes props:
const MyComponent = styled.div(({color, size}) => `
max-width: 240px;
font-size: 12px;
color: ${color ? color : '#ffffff'};
`${sizes[size]}`
`
I'm using destructuring but you can leave it as props if you prefer.

How to set padding of Gatsby Link Component to 0px with styled-components

I have made some style changes to the Gatsby Link component using styled-components. However for some reason, when i try to apply a padding of 0px, it still leaves a tiny space (few px) above/below the text (between text and top/bottom border). I used gatsby-default-starter in a codesandbox for the initial build.
HTML/CSS Env (codepen.io):
https://codepen.io/marti2221/pen/mNVJWZ
Gatsby Env (codesandbox):
https://codesandbox.io/s/gatsby-paddinglink-spacing-gedtq
I have tried applying padding via styled-components in a Gatsby environment, as well as a normal html/css environment. When padding is set to 0px on the "a" tag in css/html environment, there is no space around the text, as expected. However when i attempt to add the same padding to the gatsby Link component or even a regular a tag, in a gatsby environment, there is a tiny space between the text and my border. This leads to a larger padding on top/bottom for my BtnLink than expected. I could adjust my padding accordingly, but i would like to know the root cause of this issue.
const StyledLink = styled(Link)`
display: inline-block;
font-family: sans-serif;
border-radius: 25px;
padding: 0px;
text-decoration: none;
border: 2px solid green;
`
const StyledA = styled.a`
display: inline-block;
font-family: sans-serif;
border-radius: 25px;
padding: 0px;
text-decoration: none;
border: 2px solid green;
`
const BtnLink = props => (
<StyledLink {...props}>{props.children}</StyledLink>
)
const IndexPage = () => (
<Layout>
<BtnLink to="page-2">Request Quote</BtnLink>
<StyledA href="page-2">Request Quotes</StyledA>
<Link to="page-2">Link</Link>
</Layout>
)
My desired result is a gatsby Link component that can be styled the same as a regular link element (ie. 0px padding). My result is link text with some spacing around it in the Gatsby environment. When tested with regular HTML/CSS, results are as expected (no spacing when padding is set to 0px)

You've already made a styled(Link) styledComponent, and saved it to the const StyledLink.
const StyledLink = styled(Link)`
display: inline-block;
font-family: sans-serif;
border-radius: 25px;
padding: 0px;
text-decoration: none;
border: 2px solid green;
However, this won't have any affect on a regular gatsby Link component. You still need to render this new StyledLink styledComponent instead of a gatsby Link component if you want to see that styled variation on your page.
const IndexPage = () => (
<Layout>
<BtnLink to="page-2">Request Quote</BtnLink>
<StyledA href="page-2">Request Quotes</StyledA>
<StyledLink to="page-2">Link</StyledLink>
</Layout>
)

Clickable div acting as a button function react js

I have a button function inside the component 'CZButton', the button is used in "personlist" for a pop up, I am trying to make the div card inside of either 'personlist' or 'person' clickable so that instead of clicking the button, the div would be clicked and shows the drawer pop up.
I tried adding onclick inside divs and but it did not seem to reach the drawer function. here is a sandbox snippet, would appreciate the help.
https://codesandbox.io/s/l9mrzz8nvz?fontsize=14&moduleview=1

You can add an onClick listener in React just by writing something like:
// omitting the rest of the render function for brevity
return (
<div className="row" onClick={e => console.log("Clicked")}></div>
);
Just be careful with the HTML semantics. Although it is possible, I wouldn't really recommend adding onClick events to a div. There are good resources online about HTML5 standards and what you should adhere too.

Live Demo: https://n329k226om.codesandbox.io/
App.js
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
constructor() {
super();
this.test = this.test.bind(this);
}
test() {
alert("function executed on clicking div");
}
render() {
return (
<div>
<div
onClick={() => this.test()}
className="interactivediv fa fa-window-close"
>
div
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.interactivediv {
height: 150px;
width: 150px;
background: rgb(68, 196, 196);
cursor: pointer;
border: 1px solid grey;
}
.interactivediv:active {
border: 2px solid black;
}