StyledComponentでカスタマイズしたdivタグコンポーネントに、checked属性に値を渡すとTypeScriptでエラーになってしまう

Question

聞きたいこと

styled-compoenntを使用して自前のデザインを適用したチェックボックスを作成しています。
自前のチェックボックスのデザインを整えるために、下のソースコードのようにdivタグでアイコンをラップしているのですが、divタグに存在していない属性であるchecked属性をdivタグにわたすと、TypeScriptでエラーになってしまいます。

• エラー

TS2769: No overload matches this call.   Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | ... 253 more ... | "css"> & { ...; }, "slot" | ... 255 more ... | "css"> & Partial<...>, "slot" | ... 255 more ... | "css"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.     Type '{ children: Element; checked: any; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 254 more ... | "css"> & { ...; }, "slot" | ... 255 more ... | "css"> & Partial<...>, "slot" | ... 255 more ... | "css"> & { ...; } & { ...; }'.       Property 'checked' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 254 more ... | "css"> & { ...; }, "slot" | ... 255 more ... | "css"> & Partial<...>, "slot" | ... 255 more ... | "css"> & { ...; } & { ...; }'.   Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, {}, never, "div">): ReactElement<StyledComponentPropsWithAs<"div", any, {}, never, "div">, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.     Type '{ children: Element; checked: any; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 254 more ... | "css"> & { ...; }, "slot" | ... 255 more ... | "css"> & Partial<...>, "slot" | ... 255 more ... | "css"> & { ...; } & { ...; }'.       Property 'checked' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 254 more ... | "css"> & { ...; }, "slot" | ... 255 more ... | "css"> & Partial<...>, "slot" | ... 255 more ... | "css"> & { ...; } & { ...; }'.

• 自前のチェックボックスのコード

import * as React from "react";
import styled from "styled-components";

const Icon = styled.svg`
  fill: none;
  stroke: white;
  stroke-width: 2px;
`;

const Wrapper = styled.div`
  ${Icon} {
    visibility: ${(props) => (props.checked ? "visible" : "hidden")};
  }
`;

export const Checkbox = (props) => {
  return (
    <Wrapper checked={props.checked}>
      <Icon />
    </Wrapper>
  );
};

• チェックボックス呼び出し元

import * as React from "react";
import "./styles.css";
import { Checkbox } from "./Checkbox";

export default function App() {
  const [checked, setChecked] = React.useState(false);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Checkbox checked={checked} />
    </div>
  );
}

Answer 1

次のように、追加のpropsを定義することができます。

const Wrapper = styled.div<{ checked: boolean }>`
    ${Icon} {
        visibility: ${(props) => (props.checked ? "visible" : "hidden")};
    }
`;