[React/CSS] Styled-Components에서 Link 사용하기

개발자 도구를 켜서 보면 Link는 a 태그로 보여진다.

styled.a`` 로 스타일링을 적용하려 하면 적용이 안된다.

 

당연함 Link는 react-router-dom의 React 컴포넌트다.

그래서 개발자 도구에서는 a 태그로 보이지만 일반적인 HTML a 태그와 다르다.

 

따라서 styled.a``가 아니라 styled(Link) 로 스타일링을 적용해야 한다.

 

const StyledLink = styled(Link)`
  display: block;
  width: 100%;
  text-align: right;
  text-decoration: none;
  color: var(--main-color);
  padding-top: 10px;
  font-size: 14px;
`;

 

참고 공식 문서: https://styled-components.com/docs/basics#styling-any-component