[React]styled-components 사용법

[React]Styled-Components 사용법

컴포넌트를 따로 파일로 분류하여 사용하다보면 css 작성시 클래스명의 중복 등으로 관리가 어려워진다. 그래서 이러한 실수를 막기 위해 클래스를 선언하지 않고 컴포넌트에 직접 css를 넣는 방법이 있는데 이 방법이 바로 styled-components를 사용하는 것이다.

styled-components 시작하기

styled-components 설치하기

styled-components 라이브러리 가져오기

Detail.js

import styled from 'styled-components';

styled-components 적용하기

styled-components 만들기

Detail.js

let 박스 = styled.div`
  padding : 20px;
`;

let 제목 = styled.h4`
  font-size : 25px;
  color : ${ props => props.색상 }
`

styled-components 사용하기

Detail.js

        <박스>
            <제목 색상={"red"}>상세페이지</제목>
            <제목 색상={"blue"}>상세페이지</제목>
        </박스>

결과 화면