/**
스타일드 컴포넌트를 목킹한 styled In Js 입니다. 사용 코드를 보여줘야할 것 같아서 추가적으로 넣습니다.
위의 조잡한 컴포넌트들의 코드입니다. 스타일드 방식과 거의 유사하죠? 스타일드 컴포넌트 Repo를 참고 해서 간단하게 만들어 봤습니다.
**/
const styled = new StyledInJs();
styled.createGlobalStyle`
button {
border: none;
}
pre {
background: tomato;
}
`;
const div = styled.div`
display: block;
width: 100%;
height: 100px;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
background: red;
&:active{
background: tomato;
}
`;
const button = styled.button`
width: 300px;
height: 100%;
background: cyan;
&:hover{
background: blue;
color: #fff;
}
`;
button.innerText = '스타일드';
div.appendChild(button);
document.querySelector('#app').appendChild(div);