みかづきメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ 書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

styled-components で定義したコンポーネントから Props を取り出したい

例えば下のようなコンポーネントがあって、

import colors from "colors.css";
import styled from "styled-components";

type Props = {
  primary?: boolean;
}

const Button = styled.button<Props>`
  border: 1px solid ${props => props.primary ? colors.blue : colors.silver}
`;

export default Button;

何らかの理由で import Button from "./Button" とした状態で Props を得たい場合の型定義。

export type ExtractProps<T> =
  T extends StyledComponent<any, any, infer R, never> ? R
  : unknown;

いちおうこれで取り出せたのでメモ。