카테고리 없음
Styled Components 기본 사용법
jinux127
2022. 4. 20. 01:14
Styled Components 는 css 파일을 분리하여 관리하는 것이 아닌 각 컴포넌트에 HTML, CSS, JavaScript를 관리하는 패턴에 많은 도움을 준다.
사용방법
패키지 설치
$ npm i styled-components설치 이후에 package.json에 추가된 것을 확인
사용 방법
기존의 CSS와 비교해보자
h1 {
font-size: 2em;
}
h2 {
font-size: 1em;
}CSS 파일에 따로 작성하여 관리하였다면
아래의 js파일 안에서 관리를 할 수 있다.
import styled from "styled-components"; // 1. styled-components 참조
// 2. 해당 div style 작성
const StyledListItem = styled.div`
background-color: rgb(240, 240, 240);
width: 100%;
`;
const ListItem = () => {
return (
<StyledListItem> // 3. 작성한 div 컴포넌트 사용
</StyledListItem>
);
};