리액트 styled-component사용하기

설치

# yarn add styled-components

 

import styled from 'styled-components';

 

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

/*Detail function밖에 선언할 것*/

 

/*Detail function 안에 있는 태그*/
<박스>
     <제목 색상={'red'}>상세페이지</제목>
     혹은
     <제목 색상="blue">상세페이지</제목>
</박스>