☰

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

tag-icon • tag-icon reactjs typescript styled-components
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'?

これを動作させるにはどうすればよいですか?

ベストアンサー1

  • スタイル付きコンポーネントは、コンポーネントに渡すプロパティを次のように指定する必要がありますstyled("h2")<IProps>。パターンの詳細については、以下を参照してください。ドキュメンテーション
  • cssここでは必要ありませんが、関数から実際にCSSを返す必要があるときにヘルパーとして追加されます。条件付きレンダリング。

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

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

ユースケースcss

おすすめ記事