Next.js 에서 font-size나 font-family 등과 같은 글로벌 스타일을 적용해 주고 싶을때 설정해주는 방법에 대해서 알아보겠습니다.
☝🏻 styled jsx에 'global' prop 추가
첫 번째 방법으로 styled jsx에 글로벌 프롭을 추가해주는 방법이 있습니다.
하지만 이와 같은 방법은 페이지당 적용되기 때문에 해당 페이지의 글로벌 스타일만 적용시킬 수 있습니다. 다른 컴포넌트의 전역 스타일까지 같이 적용되지 않습니다.
return (
<div>
<NavBar />
<h1 className={counter % 2 === 0 ? "active" : ""}>counter {counter}</h1>
<button onClick={() => setCounter((pre) => pre + 1)}>+</button>
📌📌📌 <style jsx global>{`
h1 {
background-color: tomato;
}
.active {
color: yellow;
}
`}</style>
</div>
);✌🏻 layout.js 파일에 스타일 작성
두 번째 방법으로는 layout.js 파일에 스타일을 작성해주는 방법입니다.
create-next-app 으로 설치를 해주면 기본적으로 app 폴더 안에 layout.js 파일이 존재합니다. 해당 파일 안에 아래와 같이 body 태그 안에 공통으로 적용해주고 싶은 요소를 작성해 줄 수 있습니다.
import "./globals.css";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
🔥🔥 <NavBar /> 🔥🔥
{children}
🔥🔥 <span>hello</span>🔥🔥
🔥🔥 <style>{`
h1 {
color: yellow;
}
`}</style> 🔥🔥
</body>
</html>
);
}추가적으로 layout.js 파일은 global.css 파일을 import 하고 있으므로 global.css 파일에서 전역 스타일을 지정해 줄 수도 있습니다.
