React에서 scroll bar 스타일 변경

export const ScrollDiv = styled.div`
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: #ccc;
  }
`;

구글링을 통해 스크롤바의 스타일 변경할 수 있는 방법을 찾아 적용했다.
-webkit-scrollbar로 width를 변경하면 스크롤바의 모양이 바뀐다.

그 상태에서 -webkit-scrollbar-thumb로 스크롤바의 색을 바꾸고 동글동글한 느낌을 줬다.

그냥 저 상태로 적용하면 스크롤바가 div의 제일 오른쪽에 붙어있는데 부모 컴포넌트에서 padding을 줘서 살짝 안쪽으로 밀어 넣어서 좀 더 잘 보이게 했다.

더 다양한 속성을 활용해서 꾸밀수도 있을거 같다.