styles jsx

react컴포넌트에 스타일을 적용하는 방법으로 styles jsx를 사용하는 방법도 있다.

styles jsx는 nextJS에만 있는 고유의 방법이다. 

 

styles jsx를 사용하면 이점

별도의 파일이 필요없다는 점

 

styles jsx를 적용했을때도 module.css를 적용했을때와 동일하게 

클래스명이 난수로 표현된다. 중복우려 없음! 

 

컴포넌트안에 html style태그를 넣어주고 jsx props를 입력해준다. 

그리고 그 안에 스타일을 작성한다. 

<style jsx>{`
    nav {
      background-color: tomato;
    }
    a {
      text-decoration: none;
    }
    .active {
      color: yellow;
    }
`}</style>

 

이슈!  a태그에 스타일을 적용하는데 적용이 안될때 해결법 

1. <style jsx global></style> 글로벌로 선언한다

2. legacyBehavior 사용하여 이전버전 link를 커버한다.

<Link href="/" legacyBehavior><a  className="active">Home</a></Link>

3. link > span태그를 넣어서 클래스를 span태그에 적용한다. 

<Link href="/"><span className={router.pathname === "/" ? "active" : ""}>Home</span></Link>

 

컴포넌트 안에서 사용한 styles jsx의 스코프는 컴포넌트로 한정된다. 

부모 컴포넌트에서 적용이 안된다. 

 

styles jsx 전역으로 적용하기
global props를 넣어준다. 

<style jsx global>
    {`
        .active {
          color: blue;
        }
    `}
</style>

페이지 컴포넌트에서 공통 선언하기 위해서는 공통페이지 청사진 컴포넌트가 필요하다. 

페이지에서 동일하게 중복선언하기 번거롭기 때문에 

 

pages 폴더에 _app.js를 만들어준다. 

페이지 컴포넌트가 렌더링 되기 전에 _app.js를 실행시키고 렌더링한다. 

_app.js는 페이지 컴포넌트의 청사진이라고 볼 수 있다. 

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <div>
      <Component {...pageProps} />
      <style jsx global>
      {`
        .active {
          color: blue;
        }
      `}
      </style>
    </div>
}

export default MyApp

 

_app.js를 사용하면 좋은점 

nextJS에서는 css파일을 import 할 수 없다. 

무조건 module를 import할 수 있는데 

_app.js에서는 css도 import할 수 있어서 global.css를 가져올 수있다.