【StyledSystem】npm install しても参照できない

StyledSystemというライブラリをつかってインラインスタイルぽく書くのを試していた

uga-box.hatenablog.com

ただ、いくつかうまくいかないところがあったので、使用するのをやめた

うまくいかないところをメモしておく

npm install しても参照できない

原因不明で解決できなかった

使用をやめた一番の理由

ローカルではうまくいくが、なぜかCloud Buildでビルドしようとするとエラーになる

ERROR in ./src/shared/components/molecules/MyComponent.tsx
Module not found: Error: Can't resolve 'styled-system' in '/workspace/src/shared/components/molecules/MyComponent'
resolve 'styled-system' in '/workspace/src/shared/components/molecules/MyComponent'
...
      /workspace/src/shared/components/molecules/MyComponent/node_modules doesn't exist or is not a directory
      /workspace/src/shared/components/molecules/node_modules doesn't exist or is not a directory
      /workspace/src/shared/components/node_modules doesn't exist or is not a directory
      /workspace/src/shared/node_modules doesn't exist or is not a directory
      /workspace/src/node_modules doesn't exist or is not a directory
...

直接原因は node_modules にないというものだが、直前のステップでnpm installしているのであるはず

最新のcssが更新されていない

Flex Box のgapが使いたかったが使えなかった

APIとして用意されていない

このように、ちょいちょい使えないスタイルがあるため困る

代替する

StyledSystemをやめる代わりに、以下のように自作してみる

type Props = {
  padding: string;
}

const MyComponent = (props: Props): JSX.Element => {
  return (
      <Wrapper {...props}>
        ...
      </Wrapper>
  );
}

const Wrapper = styled.div<Props>`
  {p => p.padding ? `padding: ${p.padding};` : ""}
`