styled-componentsでdiv要素のwidthを指定する

はじめに

styled-componentsでdiv要素のwidthをpropsで渡す方法の備忘録です。

いきなりですが結論

constStyledSample=styled.div<{width:number}>`
  width: ${(props)=>props.width};
`;

型を指定してあげれば、styled-componentが受け取ったpropsから
アクセスできました。

公式サイトからは、単純な要素(div,button等)とカスタムコンポーネントで
propsの受け取り方が違うみたいなことしか読み取れなかったので、ちょっと苦労しました…
https://styled-components.com/docs/basics#passed-props