Tag: styled-components

Styled-components Typescript 적용하기 (+Media query)

시작하기기존에 styled-components 반응형 및 스타일 리셋 설정하기 포스트을 통해서 스타일 최초 설정해보았습니다. theme를 입력했을때 typescript로 자동으로 연결해주는 부분이 미흡했습니다. 타입스크립트를 styled-components 와 제대로 사용해보도록 하겠습니다. 설치하기1npm i styled-components &&a

styled-components lint 적용하기

시작하기styled-components를 사용시에 작성오류를 찾거나 교정을 해줄수 있도록 lint를 추가해보도록 하겠습니다. 설치하기 styledlint (duh) stylelint-processor-styled-components ( 스타일 추출 ) stylelint-config-styled-components ( 구성 요소와 충돌하는 stylelint

styled-components 반응형 및 스타일 리셋 설정하기

시작하기저번 포스트에서 styled-components 간단한 사용방법을 알아보았습니다.이번 포스트에서는 브라우저 스타일을 리셋하는 방법과 함께 반응형 설정하는 방법을 알아 보겠습니다. npm install styled-components @types/styled-components패키지를 설치해줍니다. 초기 설정브라우저 스타일 리셋을 하도록 하겠습니다.먼

styled-components 리액트 컴포넌트 스타일링

시작하기styled-components는 리액트 CSS-in-JS 관련 라이브러리입니다.css를 자바스크립트 파일안에 작성하는 형태입니다.기존 css의 경우 웹사이트를 불러올때 모든 css 로딩합니다.하지만 styled-components의 경우에는 컴포넌트가 실행 될때만 스타일을 로드합니다.사용하지 않는 스타일은 표현하지 않습니다. 설치npm instal