dynamic styled component with function component props

Question

I try to not instantiate my styled component in render method, but i need the props of my component to create style, can i do this with a simple function component outside render method ? I have the typescript following error :

No overload matches this call. Overload 1 of 2, '(props: Pick, HTMLElement>, "style" | "title" | "key" | "defaultChecked" | ... 250 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }, "style" | ... 257 more ... | "rowEnd"> & Partial<...>, "style" | ... 257 more ... | "rowEnd"> & { ...; } & { ...; }): ReactElement<...>', gave the following error. Type '{ children: Element[]; className: string; }' is missing the following properties from type 'Pick, HTMLElement>, "style" | "title" | "key" | "defaultChecked" | ... 250 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }, "style" | ... 257 more ... | "rowEnd"> & Partial<...>, "style" | ... 257 more ... | "rowEnd">': photo, rowStart, rowEnd Overload 2 of 2, '(props: StyledComponentPropsWithAs<"figure", any, { photo: Photo; rowStart: number; rowEnd: number; }, never>): ReactElement, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error. Type '{ children: Element[]; className: string; }' is missing the following properties from type 'Pick, HTMLElement>, "style" | "title" | "key" | "defaultChecked" | ... 250 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }, "style" | ... 257 more ... | "rowEnd"> & Partial<...>, "style" | ... 257 more ... | "rowEnd">': photo, rowStart, rowEnd

 type MyProps = {
    className: string,
    photo: IPhoto,
    rowStart: number,
    rowEnd: number,
}

const Figure = styled.figure<{photo: IPhoto, rowStart: number, rowEnd: number}>`
grid-column-start: ${props => props.photo.colStart};
grid-column-end: ${props => props.photo.colEnd};
grid-row-start: ${props => props.rowStart};
grid-row-end: ${props => props.rowEnd};
`; 


const Photo = (props: MyProps) => {
    return (
        <Figure className={props.className}>
            <Link to={`/photo/${props.photo.id}`}>
                <img src={props.photo.url_c} alt={props.photo.title} />
            </Link>
            <figcaption>{props.photo.title}</figcaption>
        </Figure>
    )
}

export default Photo;

Styled Components do allow you to pass props and can be dynamic based on prop values: styled-components.com/docs/basics#adapting-based-on-props — Shawn Yap
– Shawn Yap, Commented Mar 13, 2020 at 14:46
Does this answer your question? React — Passing props with styled-components — Agney
– Agney, Commented Mar 13, 2020 at 21:33
It seemed to be the same issue, but i had a typescript error. I edited my question — Dujard
– Dujard, Commented Mar 14, 2020 at 14:43
@Agney it answer to my question, but i have a typescript error, i can't understand the message, it seems that styled component missing some additional props. I updated my post with error. — Dujard
– Dujard, Commented Mar 16, 2020 at 9:23

Ivan Popov · Accepted Answer · 2022-05-24 22:45:41Z

No problem. You can pass props to a styled component.

You just pass props as in a normal component and already inside the styled component you change the styles depending on the props.

You can see an example below.

You have an error. I can explain why it appears. You specify the types for the props that the "Figure" component accepts. You indicate that these props are required! But at the same time, you do not pass them, so an error appears. You indicated that they are required, but did not pass them, hence the error.

Remember, "type: number" is required. "type?: number" is optional, and can be omitted. That is, the difference is in ":" or "?:".

{ rowEnd: number } // is required

{ rowEnd?: number } // is not required

In the example below, I left them required in the "Figure" component. And passed them on. You can change this.

I also destructed the props, which is a bit cleaner than writing "props.something" every time.

type MyProps = {
    className: string;
    photo: IPhoto;
    rowStart: number;
    rowEnd: number;
};

const Figure = styled.figure<{ photo: IPhoto; rowStart: number; rowEnd: number }>`
    grid-column-start: ${p=> p.photo.colStart};
    grid-column-end: ${p => p.photo.colEnd};
    grid-row-start: ${p=> p.rowStart};
    grid-row-end: ${p=> p.rowEnd};
`;

const Photo = ({ photo, rowStart, rowEnd, className }: MyProps) => (
    <Figure className={className} photo={photo} rowStart={rowStart} rowEnd={rowEnd}>
        <Link to={`/photo/${photo.id}`}>
            <img src={photo.url_c} alt={photo.title} />
        </Link>
        <figcaption>{photo.title}</figcaption>
    </Figure>
);

export default Photo;

Collectives™ on Stack Overflow

dynamic styled component with function component props

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related