I created this styled component using TypeScript following the guidelines in their documentation
import matrix from '../img/matrix.jpg';
const Style = styled.div`
.fixed {
background-image: url(${props => props.image ? props.image : "../img/default.jpg"})
z-index: -999!important;
display: block;
top: 0;
left: 0;
}
`;
export const FixedBackground = () => {return (
<Style image={matrix}>
</Style>
)};
However, I encountered a compile error
Property 'image' does not exist on type 'ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"slot\" | \"style\" | \"title\" | ... 251 more ... | \"onTransitionEndCapture\"> & { ...; }, any>'I attempted to modify the styled component like this
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>
)};
Yet, I still faced a compile-time error
Type '{ children: never[]; image: string; }' is not assignable to type 'IntrinsicAttributes & { image: string; }'. Property 'children' does not exist on type 'IntrinsicAttributes & { image: string; }'."