styled-components + TypeScript での attrs() の書き方
はじめに
今回は 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を味わいに来ませんか？
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
求人応募してみる！
