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

Question

尝试将 Styled Compoments 3 与 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>
);

我是这样调用这个组件的：

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

我正在使用：

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

我做错了什么？

Answer 1

怎么样：

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

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

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

How do you pass custom properties to TypeScript + StyledCompoments?

typescript

reactjs

styled-components

storybook