Styles JSX

전의 css module은 조건에 대한 css스타일을 주기 불편하고, 클래스이름을 외워야 하지만, styled jsx는 그렇지 않다.

return <nav>
        <Link href="/">
            <a>Home</a>
        </Link>
        <Link href="/about">
        	<a>About</a>
        </Link>
        <style jsx>{`
            nav {
                background-color: tomato;
            }
            a {
                text-decoration: none;
            }
        `}</style>
</nav>

이런 식으로, style태그 안에 jsx를 적고, {``}안에 내용을 적어주면 된다. 하지만, 한 파일에 있는 요소만 영향을 줄 뿐 다른 파일의 a태그엔 영향을  주지 않는다. 클래스 역시 이렇게 넣어주고, .클래스이름 {}하면 된다.

<a> className={router.pathname ==="/about" ? "active": "" }About</a>

그리곤, 클래스도 한 컴포넌트 내부로 범위가 한정되므로 클래스이름이 같아도 상관없다.