0
187
ViewsHow to override React Component styles with styled components?
I have a <DiscoverButton> React Component which has some styles and does smth when clicked. I'm using styled components 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 accomplish 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>
);
·
Juan Pablo Isaza
1 answers
Answer question0
You should pass the className prop through to the rendered styled component.
export const DiscoverButton: React.FC<Props> = ({ children, className, ...props }) => {
return (
<BigButton
className={className}
onClick={() => // do smth with props
>
{children}
</BigButton>
);
};
Update
When defining a component you will need to mark
classNameas 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 components in such a way as to manually pass the extraneous props on to the styled components.
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%;
`;
·
Juan Pablo Isaza
Report
Answer question