在Typescript中传递道具以反应样式化组件

我用typescript编写了这个样式化组件。这是根据他们的

从“../img/matrix.jpg”导入矩阵；
const Style=styled.div`
.固定{
背景图像：url（${props=>props.image？props.image:../img/default.jpg“}）
z指数：-999！重要；
显示：块；
排名：0；
左：0；
}
`;
export const FixedBackground=（）=>{return(
)};

但是它抛出了一个编译错误

类型“ThemedStyledOps”上不存在属性“image”

我还尝试编写我的样式化组件，如

    const Style = (props: {image: string}) => {return (styled.div`
      .fixed {
        background-image: url(${props.image})
        z-index: -999!important;
        display: block;
        top: 0;
        left: 0;
      }
    `)};
    export const FixedBackground = () => {return (
      <Style image={matrix}>
      </Style>
    )};

conststyle=（props:{image:string}）=>{return（styled.div）`
.固定{
背景图像：url（${props.image}）
z指数：-999！重要；
显示：块；
排名：0；
左：0；
}
`)};
export const FixedBackground=（）=>{return(
)};

但它再次抛出编译时错误

类型“{children:never[]；image:string；}”不可分配给类型“intrinsiactattributes&{image:string；}”。属性“children”在类型“intrinsicatAttributes&{image:string；}”上不存在。“

请尝试以下操作：

interface StyleProps {
  image?: string;
} 

const Style = styled.div<StyleProps>`
      .fixed {
        background-image: url(${props => props.image ? props.image : "../img/default.jpg"})
        z-index: -999!important;
        display: block;
        top: 0;
        left: 0;
      }
    `;

interface StyleProps{
图像？：字符串；
} 
const Style=styled.div`
.固定{
背景图像：url（${props=>props.image？props.image:../img/default.jpg“}）
z指数：-999！重要；
显示：块；
排名：0；
左：0；
}
`;

查看您发送的链接。我认为它没有被传递，因为您使用的是一个简单的元素，并且由于image属性不是div元素的已知属性，因此它没有被传递

“传递的道具”、“任何组件的样式”上面的部分可能会提供您所需要的

传递道具 如果样式化目标是一个简单元素（例如styled.div），则样式化组件将通过任何已知的HTML属性传递到DOM。如果它是一个自定义组件（例如styled（MyComponent）），则样式化组件将通过所有道具

interface StyleProps {
  image?: string;
} 

const Style = styled.div<StyleProps>`
      .fixed {
        background-image: url(${props => props.image ? props.image : "../img/default.jpg"})
        z-index: -999!important;
        display: block;
        top: 0;
        left: 0;
      }
    `;