Styled-Component로 하위 엘리먼트 css 입히기

default

 

npm install styled-components되어있고

 

import Styled from 'styled-components'

로 파일안에 선언이 되어있어야 함

 

 

 

일단 Toggle이라는 이름의 styled-component를 만들어보자

 

const Toggle = Styled.div``

 

이제 백틱 사이에 css 넣으면 css 가 지정된 엘리먼트를 사용할 수 있음

 

const Toggle = Styled.div`
    background:transparent;
    border-color:transparent;
`

 

여기서 Toggle 컴포넌트 안에 다른 엘리먼트들이 들어가 있을 때

 

            <Toggle>
                <input
                    type="checkbox"
                    id="nav-toggle"
                    className="nav-toggle"
                />
                <label htmlFor="nav-toggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </label>
            </Toggle>

 

styled-components로 안에 들어 있는 엘리먼트들에 한번에 css 를 입힐 수 있다.

 

styled-component안에서는 & 라는 기호의 의미가 스스로 (class 컴포넌트안의 this 같은 느낌) 라서  & 뒤에 > 표로 안으로 접근할 수 있다.

 

const Toggle = Styled.div`
    background:transparent;
    border-color:transparent;

    & > .nav-toggle{
        display:none;
    }
`

 

이런 식으로

 

그럼 전부 다 css 를 입혀보면

 

const Toggle = Styled.div`
    background:transparent;
    border-color:transparent;

    & > .nav-toggle{
        display:none;
    }

    & > .nav-toggle + label{
        display:block;
        width: 2.5rem;
        height:2rem;
        position:relative;
        cursor:poiner;
    }

    & > .nav-toggle + label > span{
        display:block;
        position:absolute;
        width: 100%;
        height: 5px;
        border-radius:30px;
        background: #000;
        transition: all .35s;
    }

    & > .nav-toggle + label > span:nth-child(1){top:0}
    & > .nav-toggle + label > span:nth-child(2){
        top:50%;
        transform:translateY(-50%);
    }
    & > .nav-toggle + label > span:nth-child(3){bottom:0}


    & > .nav-toggle:checked + label > span:nth-child(1){
        top:50%;
        transform:translateY(-50%) rotate(45deg);
    }
    & > .nav-toggle:checked + label > span:nth-child(2){
        opacity:0;
    }
    & > .nav-toggle:checked + label > span:nth-child(3){
        bottom:50%;
        transform:translateY(50%) rotate(-45deg)
    }
`