<Link> Styled-component 적용

로그인 페이지 틀 다 짜놨을때에는 분명 가지런했었는데 ..
Link로 바꾸니까 갑자기 정렬이 삐뚤빼뚤 ..

🐛 React의 Link 컴포넌트는 스타일링을 어떻게 할까? 🐛

문제코드

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

<SignUpButton to="/signup>회원가입</SignUpButton>

  SinUpButton = styled(Link)`
  	height: 50px;
  	font-size: 0.85rem;
  	border: 1px solid 949597;
  	border-radius: 15px;
  	background-color: #ffe866;
  	width: 115px;
  	height: 35px;
  	&:hover {
    background-color: #676767;
  } 
`;

( + react-router-dom 의 Link )

여러가지를 찾아봐서 적용해봤지만 안되는이유는
v6 버전에서 NavLink 사용 방법은 동일하나 activeStyle, activeClassName 속성이 삭제되었다고 한다.

• activeStyle은 style로 activeClassName은 className 변경

NavLink 사용

react-route-dom 라이브러리의 NavLink를 가져온 후 <NavLink></NavLink> 를 가져와 작성해야 한다.
NavLink는 isActive라는 상태정보가 들어있어서 콜백으로 삼항연산을 쓰라고 해서 사용해봤지만 굳이 사용할 일이 아닌데도 이것만 나와서 일단 사용해봤다

<NavLink to="경로" className={({isActive}) => {
	return isActive ? '클래스명' : '';
    }}>
    내용
</NavLink>

내 코드에 적용해봤지만 역시 실패

혹시나 className을 style로 바꿔봐도 실패

버튼 스타일을 다르게 바꿔봐도 실패

해결방법

스타일에 active를 사용하면 된다고 한다. 그래서

  SinUpButton = styled.button`
  	height: 50px;
  	font-size: 0.85rem;
  	border: 1px solid 949597;
  	border-radius: 15px;
  	background-color: #ffe866;
  	width: 115px;
  	height: 35px;
  	&:hover {
    background-color: #676767;
  } 
  	&:active {
    }
`;

이었던 스타일에 hover와 같이 마우스를 누르거나 올릴 때 쓰는 &:를 당연히 NavLink도 사용하였지만 계속 안되서 찾아보니 &.을 사용해야한다고 하며 eslink오류로 띄어쓰기까지 하니 완성되었다 .

완성코드

  import { NavLink } from 'react-router-dom';
  
  <SignUpButton>
  	<NavLink to="/signup">회원가입</NavLink>
  </SignUpButton>
  
  const SignUpButton = styled.button`
  	height: 50px;
  	font-size: 0.85rem;
  	border: 1px solid 949597;
  	border-radius: 15px;
  	background-color: #ffe866;
  	width: 115px;
  	height: 35px;
  	&:hover {
    	background-color: #676767;
    	&.active {
    	}
	}
`;

삼항연산을 통해서 사용하는 방법만 나와서 무조건적으로 써야하는줄 알았는데 몇시간동안 찾은거에 비해 허무하지만 그래도 찾을 때 없던 내용을 알아서 뿌듯하다 ^__^