styled-component

이번에 개인 프로젝트를 진행하면서 styled-component 를 제대로 써보게 되었다.

 

설치

npm install styled-component

 

npm 또는 yarn으로 설치 가능한데 나는 npm 으로 설치하였다.

설치하면 package.json 에 버전 등의 정보가 추가된다.

 

문법

기본적인 문법은 다음과 같다.

styled-components 를  import 하고 아래에 ``(템플릿 리터럴)을 사용하여 스타일을 작성한다.

//기본 문법
export const 컴포넌트명 = styled.태그명`
  //css 작성
`

 

[예시]

import styled from "styled-components";

export const FormContainer = styled.form`
  margin: 20px auto;
  width: 500px;
`;

 

개발자 도구로 확인한 코드

 

form 클래스에 styled-component가 자동으로 부여해준 클래스가 들어간 것을 볼 수 있다.

 

props 활용

내용 정리 예정...

 

선택자

&

현재 컴포넌트의 모든 인스턴스를 의미한다.

 

&:hover, &:focus

현재 컴포넌트에 hover/focus 했을 때

export const MemberThumbButton = styled.button`
  //..생략
  
  &:hover,
  &:focus {
    img {
      filter: unset;
    }
  }
`;

 

 

& + &

현재 컴포넌트 다음에 오는 컴포넌트에 스타일 적용

export const MemberItem = styled.li`
  text-align: center;
  & + & {
    color: red;
  }
`;

 

> 자식 선택자

> 를 사용하여 현재 컴포넌트의 자식 컴포넌트를 선택할 수 있다.

export const MemberThumbButton = styled.button`
  //.. 생략
  > img {
    display: block;
    transition: all 0.3s;
    filter: grayscale(1);
  }
`;

 

MemberThumbButton 컴포넌트의 자식 컴포넌트 중 img 에 스타일 적용