Как передать пользовательские свойства в TypeScript + StyledCompoments? - PullRequest
Новая
       32

Как передать пользовательские свойства в TypeScript + StyledCompoments?

0 голосов
/ 27 февраля 2019

При попытке использовать 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>
);

I'mназывая этот компонент так: 

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

Я использую: 

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

Что я здесь не так делаю?

1 Ответ

0 голосов
/ 02 марта 2019

Как насчет: 

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

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