Reactjs 带有功能组件道具的动态样式组件

我尽量不在render方法中实例化我的样式化组件，但我需要组件的道具来创建样式，我可以在render方法之外用一个简单的函数组件来实现吗？ 我有以下错误类型脚本：

没有与此调用匹配的重载。 重载第1个，共2个，'（道具：Pick，HTMLElement>，“style”|“title”|“key”|“defaultChecked”|…250多个…|“onTransitionEndCapture”>&{…}&{…}&{…}，，“style”|…257多个…|“rowEnd”>&{…}&{…}）：ReactElement'，给出了以下错误。 类型“{children:Element[]；className:string；}”缺少类型“Pick，HTMLElement>，“style”|“title”|“key”|“defaultChecked”|中的以下属性。。。还有250人…|“onTransitionEndCapture”>&{…；}&{…；}，“样式”|。。。257更多…|“rowEnd”>&部分，“style”|。。。257更多…|“行结束“>”：照片，行开始，行结束 重载2/2'（props:StyledComponentPropsWithAs）：ReactElement，字符串|。。。1更多…|（new（props:any）=>Component）>'，给出了以下错误。 类型“{children:Element[]；className:string；}”缺少类型“Pick，HTMLElement>，“style”|“title”|“key”|“defaultChecked”|中的以下属性。。。还有250人…|“onTransitionEndCapture”>&{…；}&{…；}，“样式”|。。。257更多…|“rowEnd”>&部分，“style”|。。。257更多…|“行结束“>”：照片，行开始，行结束

 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;

type MyProps={
类名：string，
照片：IPhoto，
rowStart:number，
rowEnd:number，
}
const Figure=styled.Figure`
网格列开始：${props=>props.photo.colStart}；
网格列结束：${props=>props.photo.colEnd}；
网格行开始：${props=>props.rowStart}；
网格行结束：${props=>props.rowEnd}；
`; 
常量照片=（道具：MyProps）=>{
返回(
{props.photo.title}
)
}
导出默认照片；

样式化组件确实允许您传递道具，并且可以基于道具值进行动态：这是否回答了您的问题？这似乎是同一个问题，但我有一个打字错误。我编辑了我的question@Dujard请参阅@Agney it以回答我的问题，但我有一个typescript错误，我无法理解消息，似乎样式化组件缺少一些额外的道具。我用错误更新了我的帖子。