Global styles can be imported into any layout, page, or component inside the app directory.
Good to know: This is different from the
pagesdirectory, where you can only import global styles inside the_app.jsfile.
For example, consider a stylesheet named app/global.css:
body {
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}
Inside the root layout (app/layout.js), import the global.css stylesheet to apply the styles to every route in your application:
// These styles apply to every route in the application
import './global.css';
export default function RootLayout({ children }: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}