styled-components + TypeScript での attrs() の書き方

kimizuy

はじめに

今回は attrs() とスタイルに props の型指定を渡すときの Tips を紹介します。

tldr

さっそくコード例を以下に示します。

attrs() とスタイルの 2 箇所で <Props> を指定することで型が効きます。

type Props = {
  width?: string;
  height?: string;
  invalid?: boolean;
};

export const StyledTextInput = styled.input.attrs<Props>((props) => ({
  type: 'text',
  'aria-invalid': props.invalid,
}))<Props>`
  width: ${(props) => props.width || '100%'};
  height: ${(props) => props.height || '44px'};
  padding: 0 16px;
  border-radius: 4px;
  :invalid,
  &[aria-invalid='true'] {
    background-color: pink;
  }
  ::placeholder {
    color: grey;
  }
`;

使用例です。

<StyledTextInput width={width} height={height} invalid={invalid} />

参考

How do you use attrs with TypeScript?

さいごに

テンプレートリテラルの記法は特殊なので、ブランクが空くと忘れてしまいがちですね。

本記事が誰かのお役に立てると幸いです。

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

kimizuy

投稿者 Yamasaki Kimizu

React, Redux, TypeScript プロジェクトでフロントエンド領域を担当。個人でも Next.js アプリの開発をしています。日課はRSSで取得した技術記事を読むこと、最近の関心は Core Web Vitals です。将来はでかい犬が飼いたいです。