style-component 특정 스타일 재사용 스타일링을 하게되면 일정한 스타일을 반복하게 사용 될 경우가 있다. 예시로 아래 코드는 완전히 동일한 스타일이 적용되어 있다. 이렇게 완전히 똑같은 스타일을 사용해야 한다면 같은 코드의 양이 2배가 된다... 코드의 양을 줄이기 위해 style-component 에서는 똑같은 스타일링을 복사 할 수 있다. 재사용 방법 이렇게 Text 컴포넌트의 스타일과 ``태그까지 복사 할 수 있다 스타일 재사용 및 스타일 속성 추가 스타일을 재사용 할 뿐 아니라 수정 할 수 있다!

스타일컴포넌트에서 스크롤바 안보이게 하기 스크롤은 작동되지만 안보이게 하고 싶다면! > MDN 공식 사이트에 따르면 모든 사용자에게 나오는것이 아니라고합니다! 구현 간에 비호환성이 있을 수도 있다. CSS 스크롤바 선택기 ::-webkit-scrollbar : 전체 스크롤바. ::-webkit-scrollbar-button : 스크롤 막대의 버튼 ::-webkit-scrollbar-thumb : 드래그 가능한 스크롤 핸들. ::-webkit-scrollbar-track : 흰색 막대 위에 회색 막대가 있는 스크롤 막대의 트랙 ::-webkit-scrollbar-track-piece : 핸들로 덮이지 않은 트랙 부분 ::-webkit-scrollbar-corner : 수평 및 수직 스크롤 막대가 만나는 스크롤 막대의 하단 모서리 이것은 종종 브라우저 창의 오른쪽 하단 모서리입니다. ::-webkit-resizer : 일부 요

Style Component 리액트에서 스타일을 줄 수 있는 방법이 더 있다. Style Component 를 사용 하는 방법이다! SASS도 좋았지만 Style Component 를 사용하는 이유가 있다. 클래스 이름의 중첩을 줄여줌 attribute 추가가 가능 스타일에 props를 적용 할 수 있다 SASS 처럼 mixin 이 가능 컴포넌트 자체로 사용하기 때문에 더욱 직관적으로 코드를 볼 수 있습니다. 사용방법 상단에 import를 해준다 컴포넌트 생성 하단에 styled와 태그를 선언 theme 사용방법 공통으로 사용될 theme.js 를 생성! 스타일 컴포넌트에 ${props => props.theme. (mixin)} 를 입력해주면 됩니다! 네스팅 SASS처럼 네스팅도 가능! attrs 태그들의 속성까지 스타일 컴포넌트에서 적용이 가능하다!