[2019.08.21] 오늘의 TIL - [Next.js] Style 주의할 점

Next.js에서 스타일을 추가할 때, 일반적으로 <style jsx> 태그를 써서, 그 안에 CSS 스타일을 쓴다.

예시는 아래와 같다.

<div>
  <div className='Templet'>Hello~</div>

  <style jsx>
    {`
      .Templet{
        width: 100%;
        height: 100%
      }
    `}
  </style>
</div>

 

태그에 클래스 명을 지정해주고, style jsx라는 태그 사이에 스타일을 작성한다. 

그리고 React 특성 상, style jsx 태그를 포함하여 다른 컴포넌트로 전체를 한번 감싸준다. (1번 줄, 맨 마지막 줄의 div)

 

그러나 이러한 일반적인 스타일 방식이 먹히지 않을 때가 있다.

바로 아래와 같다.

const component = () => {
  const arr = ['하나', '둘', '셋'];
  const Temp = arr.map(element => (<div className='Templet'>{element}</div>));
  
  return (
    <div>
      <div>
        {Temp}
      </div>

      <style jsx>
        {`
          .Templet{
            width: 100%;
            height: 100%
          }
        `}
      </style>
    </div>
  );
}

 

위 코드를 보면, View 단에 쓸 Temp 컴포넌트를 return 전에 미리 정의해서 사용했다. 

저렇게 미리 만들어 놓은 컴포넌트에는 style이 안먹는다....

이유는 모르겠지만... 내 추측에는, component는 return 전에 이미 만들어 놓았고, style jsx은 return할 때 정의되어서 그런 것 같다..

 

# 추가 주의할 점 - hover

hover는 마우스가 해당 컴포넌트에 올라갔을때 반응하게 하는 스타일이다.

.Temp: hover {
  background-color: yellow
}

 

일반적으로 hover를 정의할 때, 위 코드와 같다. 클래스 네임 혹은 아이디 뒤에 콜론(:)을 붙이고 뒤에 hover를 쓴다.

그러나 위 코드는 hover가 먹히지 않는다.

hover를 쓰려면 네임과 'hover' 사이에 공백이 있으면 안된다.

정상적인 코드는 아래와 같다.

.Temp:hover {
  background-color: yellow
}