[styled components] class를 추가해서 style을 변경하고 싶을때 props 이용하기(addClass)

styled components를 이번에 배워서 프로젝트를 만드는 도중 
class가 바뀔때 style을 변경하는 것을 단순히 style을 추가하면 되는줄 알았는데
props를 이용해서 할수 있다는 것을 알게되었다.

//components
<aside className={loginOn ? "is--open" : null}>
	안녕하세요.
</aside>




//style
& aside{
  position:fixed;
  right:0;
  top:0; 
  z-index:9;
  width:50vw;
  height:100%;
  padding:2rem;
  background:#fff;
  transform:translateX(100%);
  transition:all .5s ease;
  box-sizing:border-box;

&.is--open{
  transform:translateX(0);
}

 

loginOn state가 바뀌면 클래스 is--open이 추가되고 그에 따른 클래스 style을 만들어 주었었다.
그런데
styled components 검색해보다가 위에 방법처럼 하지말고 props로 이용해서 하라는 글을봐서
뭔소리인가.. props가 style에도 나온다고..? 
생각하며 찾아봤다..

찾은결과 코드를 바꾸었다.

 

//conponents
<Aside toggle={loginOn}>
	안녕하세요
</Aside>



//style
export const Aside = styled.aside`
    position:fixed;
    right:0;
    top:0; 
    z-index:9;
    width:50vw;
    height:100%;
    padding:2rem;
    background:#fff;
    transform:${props=>(props.toggle ? 'translateX(0)': 'translateX(100%)')};
    transition:all .5s ease;
    box-sizing:border-box;
`
  
 

 

Aside로 스타일컴포넌트 만들어주고 toggle props를 만들어서 loginOn state 값이 바뀜에 따라 
style이 바뀌도록 하였다
저렇게 바뀔수 있다니.. 더 많은 설정 방법이 있는거 같아 프로젝트 만들면서 또 찾앙봐야겠다!