React

ABOUT US
const Container = styled.div<InfoSectionProps>`
display: flex;
flex-direction: column;
letter-spacing: 2px;
line-height: 1.8em;
align-items: center;
padding:2rem;
${props => props.primary && css`
background: yellow /*doesnt work*/
 `
background: ${props => props.primary ? "red" : "yellow"} /*gives both infoSection yellow background, so not recognising primary props*/
}
`
export default (props: InfoSectionProps) => {
 console.log(props)
 const { header, subheader, content, logo, footerLogo, cta, ctaText } = props
 return (
  <Container>
   {
    logo && <LogoImage src={logo} alt="logo" />
   }
   <Content >
    <Header> {header}</Header>
    <SubHeader>{subheader}</SubHeader>
    {content!.map((paragraph: string, index: number) =>
     <p key={index}>{paragraph}</p>
    )}
    {cta && <BookNowButton>{ctaText}</BookNowButton>}
   </Content>
   {
    footerLogo && <BGroundImage src={footerLogo} alt="cat" />
   }
  </Container >
 );
}
APP.JS
<InfoSection
       primary
       logo={Logo}
       header={homeSection.header}
       subheader={homeSection.subheader}
       content={homeSection.content}
       cta={homeSection.cta}
       ctaText={homeSection.ctaText}
      />
      <InfoSection
       logo={Logo}
       header={aboutUsSection.header}
       subheader={aboutUsSection.subheader}
       content={aboutUsSection.content}
       footerLogo={Boss}
      />
export interface InfoSectionProps {
 primary?: boolean,
 logo?: any;
 header?: string;
 subheader?: string;
 content?: string[];
 footerLogo?: any;
 cta?: boolean,
 ctaText?: string
}