I have a <DiscoverButton>
React Component which has some styles and does smth when clicked. I'm using styled ponents for styling btw. I need to create a <ReturnButton>
React Component which will be almost identical, the only difference being the width.
This is what I'm trying to do, but doesn't acplish what I want:
DiscoverButton.tsx
export const BigButton = styled.button`
width: 100%;
height: 3.5rem;
background-color: var(--lighter-black);
border: none;
border-radius: 0.4rem;
color: var(--cultured-white);
transition: background-color 0.7s, color 0.7s;
&:hover {
background-color: transparent;
border: 2px solid var(--lighter-black);
color: var(--lighter-black);
}
`;
export const DiscoverButton: React.FC<Props> = ({ children, ...props }) => {
return (
<BigButton onClick={() => // do smth with props >
{children}
</BigButton>
);
};
And here is where I struggle:
ReturnButton.tsx
:
const ReturnButtonStyled = styled(DiscoverButton)`
width: 7%;
`;
export const ReturnButton: React.FC<Props> = ({ children, ...props }) => {
return (
<ReturnButtonStyled id={props.id} btnTitle={props.btnTitle}>
{children}
</ReturnButtonStyled>
);
I have a <DiscoverButton>
React Component which has some styles and does smth when clicked. I'm using styled ponents for styling btw. I need to create a <ReturnButton>
React Component which will be almost identical, the only difference being the width.
This is what I'm trying to do, but doesn't acplish what I want:
DiscoverButton.tsx
export const BigButton = styled.button`
width: 100%;
height: 3.5rem;
background-color: var(--lighter-black);
border: none;
border-radius: 0.4rem;
color: var(--cultured-white);
transition: background-color 0.7s, color 0.7s;
&:hover {
background-color: transparent;
border: 2px solid var(--lighter-black);
color: var(--lighter-black);
}
`;
export const DiscoverButton: React.FC<Props> = ({ children, ...props }) => {
return (
<BigButton onClick={() => // do smth with props >
{children}
</BigButton>
);
};
And here is where I struggle:
ReturnButton.tsx
:
const ReturnButtonStyled = styled(DiscoverButton)`
width: 7%;
`;
export const ReturnButton: React.FC<Props> = ({ children, ...props }) => {
return (
<ReturnButtonStyled id={props.id} btnTitle={props.btnTitle}>
{children}
</ReturnButtonStyled>
);
Share
Improve this question
edited Sep 3, 2021 at 7:25
E_net4
30.1k13 gold badges112 silver badges151 bronze badges
asked Sep 3, 2021 at 0:30
sleepydrmikesleepydrmike
1211 silver badge12 bronze badges
1 Answer
Reset to default 6You should pass the className
prop through to the rendered styled ponent.
export const DiscoverButton: React.FC<Props> = ({ children, className, ...props }) => {
return (
<BigButton
className={className}
onClick={() => // do smth with props
>
{children}
</BigButton>
);
};
Update
Caveat with className
When defining a ponent you will need to mark
className
as optional in your Props interface
interface Props {
.... other prop types ....
/* This prop is optional, since TypeScript won't know that it's passed by the wrapper */
className?: string,
.... other prop types ....
}
You also don't necessarily need to write your functional ponents in such a way as to manually pass the extraneous props on to the styled ponents.
Example:
interface Props {
btnTitle?: string,
children: any,
className?: string,
id?: string,
onClick: React.MouseEventHandler<HTMLButtonElement>,
}
const BigButton = styled.button`
.... base styles ....
`;
const DiscoverButton: React.FC<Props> = ({ children, className, onClick }) => (
<BigButton
className={className}
onClick={(...args) => {
console.log("Did something with the props");
onClick(...args);
}}
>
{children}
</BigButton>
);
const ReturnButton: React.FC<Props> = styled(DiscoverButton)`
width: 7%;
`;