如何将自定义属性传递给TypeScript + StyledCompoments？

Question

I'm getting the following error when trying to use Styled Compoments 3 with TypeScript:

TS2365: Operator '<' cannot be applied to types 'ThemedStyledFunction<{}, any, DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableE...' and '{ bkgImg: any; }'.
TS2365: Operator '>' cannot be applied to types 'boolean' and 'string'.
TS2693: 'string' only refers to a type, but is being used as a value here.
TS2604: JSX element type 'ContainerTable' does not have any construct or call signatures.

Hero.tsx

import React from 'react';
import styled from 'styled-components';


const ContainerTable = styled("table")<{ bkgImg: string }>`
  background-image: url(http://baseurl.com/${(props) => props.bkgImg});
`;

 ....

export const Hero = ({
  heading,
  bkgImg,
}) => (
  <ContainerTable
    bkgImg={bkgImg}
  >
    <tr>
      <ContentTd>
        <table>
          <tr>
            <td>
              <H1>
                {heading}
              </H1>
            </td>
            <td>

            </td>
          </tr>
        </table>
      </ContentTd>
    </tr>
  </ContainerTable>
);

I'm calling this component like so:

    <Hero
      bkgImg="image.png"
      heading={
        <div>
          Way to go! <br />
        </div>
      }
    />

I'm using:

"styled-components": "3.3.2",
"react": "16.6.3",

What am I doing wrong here?

Answer 1

How about:

import React from "react";
import styled from "styled-components";

const ContainerTable = styled.table`
  background-image: url(http://baseurl.com/${(props: { bkgImg: string }) => props.bkgImg});
`;