Styled-Component에 hover 간단하게 넣는 법

 

Styled-Component에 hover 간단하게 넣는 법

hover는 element에 마우스를 올렸을때 일어날 반응을 의미한다. 한편 styled-component는 css를 js에서 사용할 수 있게 하는 라이브러리이다. 그럼 styled-component에서 hover 간단하게 넣는법을 알아보자.

hover

 

import styled from "styled-components";



const Button = styled.button`

  &:hover{  
    background-color : skyblue;
    color : blue
  }

`;

 

&:hover에서 &는 자신, 그러니까 Button을 의미한다.

이는 css-in-js인 styled-component가 css로 컴파일 될 때 외부선택기로 대체되어 다음과 같이 컴파일된다는 의미이다.

// _C23X_zSx 는 styled-component에서 만드는 예시다.

button.Button_C23X_zSx{
	...
}

button.Button_C23X_zSx:hover{
	...
}

 

이해가 안된다면 일단은 다음 코드를 보며 '아~ 그렇구나~' 하면 된다.

import styled from "styled-components";



const Button = styled.button`

  &:hover{  
    background-color : skyblue;
    color : blue
  }

`;

---

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.