[react] Link 컴포넌트에 style 주기

컴포넌트에 styled-components로 style 주는 법

 

blocker:

Link 컴포넌트에 styled-components로 style 주려고 하니 문제가 있었습니다

다른 html 태그와 달리 Link는 컴포넌트였기 때문에 같은 방법으로 적용해줄 수 없었습니다

그래서 우선 해당 페이지의 Devtools(command+option+i)를 열어 elements tab을 확인해보니, Link가 a 태그로 표시되어 있었습니다

그래서 styled-components를 사용할때는 a태그로만 사용가능한건가 생각하고 a 태그로 바꿔주니, 당연하게도 <Link to="">의 to로 페이지 이동하는 부분을 사용할 수 없었습니다

 

해결방법:

제가 만들고 있는 페이지 외부로 이동하는 것이 아니라 꼭 Link 태그를 써야했고 여기서 멘토님의 도움을 한번 받았습니다

멘토님은 컴포넌트에 styled-components 주는 법을 확인해보라고 하셨고 그러나 보니 해결하게 되었습니다

일반 태그들이 아래와 같은 방식을 사용합니다

export const Logo = styled.img`
  width: 110px;
  height: 90px;
  cursor: pointer;
`;

 

하지만, 컴포넌트의 경우 .img 대신 (Img)로 해서 style을 줄 수 있습니다

그리고 Link를 import하는 것도 style을 주는 파일에서 해야 합니다

실제 예시는 아래와 같습니다

 

index.style.js

import { Link } from 'react-router-dom';
import styled from 'styled-components';

export const LinkItem = styled(Link)`
  color: gray;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
`;

 

 

 

Resources

https://blog.logrocket.com/how-style-react-router-links-styled-components/