Property .. does not exist on type 'IntrinsicAttributes & ..'

Question

I am attempting to add a custom prop to a custom styled-component:

interface Props {
  image?: string;
  title?: string;
  subtitle?: string;
  background?: string;
}

export function CardWide({
  image, title, subtitle, background
}: Props) {
  return (
    <CardContainer background={background}>

My styled component background that I passed through looks like this:

interface Props {
  background?: string;
}

const Card = styled.div<Props>`
  display: flex;
  flex-direction: row;
  margin-top: 18px;
  width: 100%;
  min-height: 524px;
  background: ${props => props.background}

However, I receive the following error:

It feels like I've done everything that I needed to, but I am not sure what I am missing.

Answer 1

Does this code sandbox help?

https://codesandbox.io/s/magical-butterfly-4jjo0n?file=/src/App.tsx:312-320

Let me know if you need more help