스타일드컴포넌트

Etc.

[styled-components] it looks like an unknown property “X" is being sent through to the DOM

경고 내역 styled-components: it looks like an unknown prop "category" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via (connect an API like @emotion/is-prop-valid ) or consider sing transient props ($prefix for automatic filtering.) 경고 발생 경로 위의 Badge는 button 태그로 만들어져 있는데, 해당 H..

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..

Front-End/React

[React] React-icon에 Styled Components 적용하기

1. React icon, Styled Components 설치 yarn add react-icons styled-components 2. React icon에서 사용할 아이콘 import import { FaHeart } from 'react-icons/fa'; 3. Styled Compoenets를 사용해 아이콘에 스타일 적용 import React from 'react'; import { FaHeart } from 'react-icons/fa'; import styled from 'styled-components'; const Heart = () => { return ( ); }; export default Heart; const StyledIcon = styled(FaHeart)` color: r..

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
'스타일드컴포넌트' 태그의 글 목록