StyledComponents

Front-End/React

[React] 리액트에서 Styled Components Global Style, Theme 설정하기

기존의 전역 스타일링 적용 방식 웹 브라우저의 기본 스타일값을 제거하고 통일성있는 CSS 스타일 적용을 위해 reset.css 파일을 생성하고 index.js에 해당 css를 import 하는 방식으로 사용했다. 하지만 Styled Components라는 CSS-in-JS를 사용하고 있으니 사용 중인 라이브러리를 최대한 활용해서 쓰는 것이 더 효율적일 것이라는 생각이 들었다. 따라서 별도의 css 파일이 아닌 Styled Components에서 제공하는 GlobalStyleds라는 전역 스타일링 방법을 사용했다. Global Style 적용하기 프로젝트를 아우르거나 공통적으로 들어가야 할 스타일을 적용할 때 전역적(Globally)으로 스타일을 지정할 수 있는데, 이때 쓰는 방법이 전역 스타일링이다. G..

Diary/Retrospective

[항해99 / TIL] 🚢 23-04-29 Styled Components로 화면 요소 만들기

요구사항 정의 구현해야 할 기능 Button styled-components를 이용해 구현하며, props를 적절하게 활용할 것 버튼 label에 선택적으로 아이콘을 넣을 수 있도록 구현 Modal 취소, 확인이 있고, overlay 클릭 시 모달이 닫히지 않음 닫기 버튼만 있고, overlay 클릭 시 모달이 닫힘 모달을 on 시키는 버튼의 형태는 각각 달라야 하며 위에서 만든 버튼 재사용 가능 Inpnut 일반 형식의 Input 숫자를 넣었을 때 3자리 숫자마다 ,가 찍히는 input form을 구현하고 각 inpnut에 값 입력 후 저장 버튼 클릭 시 { name: '아무 텍스트', price: '콤마가 없는 금액' } 을 alert에 표시 Select select 클릭 시 option들이 나오고 ..

Olivia Kim
'StyledComponents' 태그의 글 목록