styled jsx란?

<aside> 💡 사실상 next.js의 표준이자 next.js에서만 씀

</aside>

https://github.com/vercel/styled-jsx

• <style> 태그 안에 자바스크립트 문자열 형식으로 작성

특징

네이밍

• 실제 HTML로 변환될 떈 해시값이 들어간 클래스이름으로 변경된다.

범위

• style 태그 내에서 접근 가능한 범위는 자신을 포함하는 부모까지다.
• class, tag 등을 마음껏 써도된다. (어짜피 범위가 제한됨)
• 다른 컴포넌트는 건드리지 않는다. 즉 자식이더라도 별도의 컴포넌트로 만들었으면 영향을 주지 않는다.
  • 예시
• global을 붙여주면 자식 컴포넌트도 영향을 준다.
  • <style *jsx global>*

사용법

예시 1

...

const NavBar: NextPage = () => {
  const router = useRouter();
  return (
    <nav>
      <Link href="/">
        <a>Home</a>
      </Link>
      <style jsx>{`
        nav {
          background-color: tomato;
        }

        a {
          text-decoration: none;
        }
      `}</style>
    </nav>
  );
};

export default NavBar;

설정

intellij