[ NextJS ] styled jsx ( 노마드코더 NextJS )

 

 

 

 

 

 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>
  );

return 안에 <style>을 집어넣어준다.

이 때 <style jsx></style>을 해줘야함

그리고 중괄호를 열고 안에 백틱

그 안에 css를 써주면 됨.

 

 

각각의 componts들의 style들은 독립적으로 존재한다.

 

 

 

 return (
    <nav>
      <Link href="/">
        <a className={router.pathname === "/" ? "active" : ""}>Home</a>
      </Link>
      <Link href="/about">
        <a className={router.pathname === "/about" ? "active" : ""}>About</a>
      </Link>
      <style jsx>{`
        nav {
          background-color: tomato;
        }
        a {
          text-decoration: none;
        }
        .active {
          color: white;
        }
      `}</style>
    </nav>
  );

그냥 css를 써주는 것과 똑같이 쓰면 된다

 

 

* 스타일은 그 컴포넌트 내에 한정되기 때문에 재사용이 불가능하다.

 

* 하지만 ``백틱을 이용한 문자열 삽입이기 때문에 props를 사용할 수 있다

ex) color: ${props.color}

 

 

 

 

전역 스타일을 사용하고 싶을 때는?

전역 스타일을 사용하고 싶을 때는?

style jsx에 global을 추가하기만 하면 된다

 

 

 

 

하지만 문제가 있다.

global로 사용했지만 통하지 않는 요소가 있다

이건 create react app으로 작업할 때는 생각하지 않아도 되었던 요소지만 next.js에서는 발생

about페이지로 갔을 때 link가 하양이 아닌 이유

=> 우리가 있는 페이지가 아예 다른 페이지이기 때문

=> 렌더링되는 컴포넌트 또한 아예 다름

 

모든 곳에서 Global을 사용하고 싶으면 App Component를 이용해야 한다.

App Component는 컴포넌트들의 청사진

이건 프레임워크에 포함되어 있는 것이다 

하지만 이것을 커스터마이징하려면 파일을 만들어야 함

 

 

 

 

무조건 이름이

_app.js여야 한다

다른 컴포넌트를 렌더링하기 전에 _app.js를 먼저 확인하고 index나 about을 읽어온다.

 

 

< _app.js >

export default function App({ Component, PageProps }) {
  return;
}

그리고 이렇게 두 개의 props를 전달해준다

 

 

export default function App({ Component, pageProps }) {
  return (
    <div>
      <Component {...pageProps} />
      <span>Hello</span>
    </div>
  );
}

<Component 안에 pageProps들을 넣고 /> (우리가 만든 components들 사용하기)

그 밖에

span으로 Hello를 찍으면

어느 곳으로 이동하든 우리가 만든 span 'Hello'가 보이게 된다.

 

즉

어느 페이지로 이동하든 _app.js를 거쳐야 하고

=> 여기서 우리가 설정해준 것은 모든 페이지에 적용된다는 것

 

 

 

import NavBar from "../components/Navbar";

export default function App({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
    </>
  );
}

이렇게 하게 된다면 모든 페이지에서 Navbar가 보이게 되고

나머지 페이지들은 <Component {...pageProps} />를 통해 들어오게 됨.

 

 

 

style도 마찬가지

 return (
    <>
      <NavBar />
      <Component {...pageProps} />
      <style jsx global>{`
        a {
          color: white;
        }
      `}</style>
    </>
  );

이렇게 _app.js에 style jsx global을 넣어주면

어디에서나 global style이 적용된다.

 

 

 

+

또한 index.js 등 다른 component에서는 import로 css를 가져오지 못하지만(module.css만 가져올 수 있음)

_app.js에서는 가능하다

 

import NavBar from "../components/Navbar";
import "../styles/globals.css";

export default function App({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
      <style jsx global>{`
        a {
          color: white;
        }
      `}</style>
    </>
  );
}

import해주면 된다.

 

 

🙇‍♀️

https://nomadcoders.co/nextjs-fundamentals/lobby