react styled-componentsのエラー

Question

react と Typescriptを使っています。
スタイルはstyled-componnetsを使用しています。

ハンバーガーメニューのコンポーネントを作っているのですが下記の①と②のエラーが出てしまいました。
エラー内容をみてもどう修正したらいいのかが分かリませんでした。
わかる人いましたらご教授お願いしたいです。

import React, { useState } from 'react'
import styled from 'styled-components';

const StyledBurger = styled.div`
  width: 2rem;
  height: 2rem;
  position: fixed;
  top: 15px;
  right: 20px;
  display: flex;
  justify-content: space-around;
  flex-flow: column nowrap;

  div {
    width: 2rem;
    height: 0.25rem;
    //** ①　{open}でエラーになっている**
    background-color: ${({open}) => open ? '#f1f1f1' : '#333'};
    border-radius: 10px;
  }
`


const Burger = () => {
  const [open ,setOpen] = useState(false)
  return (
　　　// ②　StyledBurgerでエラーになっている
    <StyledBurger open={open} onClick={() => setOpen(!open)}>
      <div/>
      <div/>
      <div/>
    </StyledBurger>
  )
}

export default Burger

//①のエラー
[ts] プロパティ 'open' は型 'Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 247 more ... | "onTransitionEndCapture"> & { ...; } & ThemeProps<...>' に存在しません。 [2339]


//②のエラー
ts]
型 '{ children: Element[]; open: any; onClick: () => any; }' を型 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | ... 248 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... ...' に割り当てることはできません。
  プロパティ 'open' は型 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | ... 248 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... ...' に存在しません。 [2322]

Answer 1

こんにちは
以下のように修正してみるといかがでしょうか？

(1) const StyledBurger = styled.div の上あたりに以下のような型 TProps を追加

+ type TProps = {
+   open: boolean;
+ };

  const StyledBurger = styled.div`

(2) props open を使用するところで、上記の TProps による型指定を追加

- background-color: ${({open}) => open ? '#f1f1f1' : '#333'};
+ background-color: ${({open}: TProps) => open ? '#f1f1f1' : '#333'};

上記の追加により、問題がすべて解消されるかは分かりませんが、おそらく何らかの進展はあると思います。

なお、 TProps の先頭の T は、私が個人的な慣例として、型名のプレフィクスに使っているものですので、TPropsという型名は、適宜ご変更ください。

以上、参考になれば幸いです。

追記

htsignさんからのコメントにあるとおり、以下のようにも書けます。

- const StyledBurger = styled.div`
+ const StyledBurger = styled.div<TProps>`

propsを使う箇所が、 div { background-color: ・・・ の他にもあるのでしたら、TProps の追加が一箇所だけで済む上記のほうが良いかもしれません。

Comments

[htsign]

styled.div<TProps>` ... ` でもいいですね。

[jun68ykt]

@htsignさん
コメントありがとうございます。div と ` の間に generics で props の型を入れるその書き方、初めて知りました m(_ _)m そちらのほうが良さそうなので、回答にも追記しました。

[yuyuyuooo]

ありがとうございます
解決しました!