styled-components

sass쓰다가 style-compontent를 쓰게 되었습니다

1. 설치

npm install styled-components

간단합니다.

2. styled components

<GoBtn href={siteUrl} onClick={goSite} target="_blank" rel="noreferror">
        GO
      </GoBtn>

위 코드는 a 태그인데 컴포넌트를 해야만 적용시킬 수 있기 때문에 goBtn이라고 줬습니다.

const GoBtn = styled.a`
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 34px;
  margin-left: 3px;
  font-size: 14px;
  color: #fff;
  line-height: 1.429em;
  background-color: #9e9e9e;
  vertical-align: top;
  text-decoration: none;
`;

styled.요소는 필수이고 저는 a 태그이기때문에 style.a라고 줬습니다 그리고 바로 뒤에붙는 건 ', "가 아닌 백틱입니다.

더 자세한건 아래 블로그에서 잘 정리 되어있기때문에 여기까지 하겠습니다.

https://kyounghwan01.github.io/blog/React/styled-components/basic/