web-dev-qa-db-ja.com

TypeScriptでスタイル付きコンポーネントを使用すると、propは存在しませんか？

これが私のスタイル付きコンポーネントです。

import * as React from 'react';
import styled from 'styled-components';
import { ComponentChildren } from 'app-types';

interface Props {
    children: ComponentChildren;
    emphasized: boolean;
}

const HeadingStyled = styled.h2`
    ${props => props.emphasized && css`
        display: inline;
        padding-top: 10px;
        padding-right: 30px;
  `}
`;

const Heading = (props: Props) => (
    <HeadingStyled>
        {props.children}
    </HeadingStyled>
);

export default Heading;

次の警告が表示されます。

  • Property 'emphasized' does not exist on type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, any>'.
  • Cannot find name 'css'. Did you mean 'CSS'?

これを機能させるにはどうすればよいですか？

reactjstypescriptstyled-components
10
user1283776
  • スタイル付きコンポーネントは、styled("h2")<IProps>のようなコンポーネントに渡すプロップを指定する必要があります。パターンの詳細については、 documentation から読むことができます。
  • cssはここでは必要ありません。実際に関数からCSSを返す必要がある場合にヘルパーとして追加されます。 条件付きレンダリング を確認してください。

これらを考慮すると、コンポーネントは次のようになります。

const HeadingStyled = styled("h2")<{emphasized: boolean}>`
  ${props => props.emphasized && `
    display: inline;
    padding-top: 10px;
    padding-right: 30px;
  `}
`;

cssのユースケース

13
Boy With Silver Wings

以前の答えは私にとってはうまくいきましたが、私の場合にも役立ついくつかの情報を追加するだけです：

StyledComponentsは、「ThemedStyledFunction」インターフェイスを使用して、ユーザーが追加のプロップタイプを定義できるようにします。

つまり、次のようなインターフェイスを作成できます。

interface HeadingStyled {
   emphasized: boolean;
}

そして、コンポーネントでそれを使用します：

const HeadingStyled = styled("h2")<HeadingStyled>`
  ${props => props.emphasized && `
    display: inline;
    padding-top: 10px;
    padding-right: 30px;
  `}
`;

（複数の小道具がある場合に、@ BoyWithSilverWingsが提案したものを実装するよりクリーンな方法です）

詳細については、このディスカッションを確認してください。

https://github.com/styled-components/styled-components/issues/1428#issuecomment-358621605

0
Bruno Monteiro