mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Updated Global styles and layouts (markdown)
Mason Medeiros
parent
fe60ed42e4
commit
6dc34d97a7
|
|
@ -4,72 +4,60 @@ This page will answer how to set global styles like
|
|||
- CSS resets, such as `* { box-sizing: border-box; margin: 0; padding: 0 }`
|
||||
- Any other styles you might want on `<body>` or `<html`>
|
||||
|
||||
The easiest way to accomplish it is by using the [`<Head>` component](https://github.com/zeit/next.js#head-side-effects). For example, in `pages/index.js`:
|
||||
The easiest way to accomplish it is by using the [`<style jsx global>` tag](https://github.com/zeit/styled-jsx#global-styles) on a component, specifically with [`<Head>`](https://github.com/zeit/next.js#populating-head). For example, in `pages/index.js`:
|
||||
|
||||
```jsx
|
||||
import React from 'react'
|
||||
import Head from 'next/head'
|
||||
export default () => (
|
||||
<Head>
|
||||
<style>{`
|
||||
<div>
|
||||
<Head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta charSet="utf-8" />
|
||||
</Head>
|
||||
<style jsx global>{`
|
||||
body {
|
||||
background: #000;
|
||||
font: 11px menlo;
|
||||
color: #fff;
|
||||
}
|
||||
`}</style>
|
||||
</Head>
|
||||
</div>
|
||||
)
|
||||
```
|
||||
|
||||
When the page is rendered, the `<style>` element will be placed in the `<head>`.
|
||||
When the page is rendered, a `<style>` element will be placed in `<head>`.
|
||||
|
||||
Now, how do you do this for every page? In Next.js there's no concept of "global layout". Every page in your Next.js project is _complete_ and _self-sufficient_.
|
||||
|
||||
If you've used WordPress in the past, it's similar to how every core template page has to invoke `get_header` and `get_footer`.
|
||||
|
||||
So, the easiest solution is to have your pages invoke custom header and footer components.
|
||||
So, the easiest solution is to have your pages invoke something like a custom header or footer.
|
||||
|
||||
Let's say that what you defined above as `pages/index.js` now lives in `components/meta.js`, since that is all it currently contains. You've also created a footer in `components/footer.js` to use across all your pages. Now, you use both in `pages/index.js`:
|
||||
|
||||
```jsx
|
||||
import React from 'react'
|
||||
import Header from '../components/header'
|
||||
import Meta from '../components/meta'
|
||||
import Footer from '../components/footer'
|
||||
export default () => (
|
||||
<div>
|
||||
<Header />
|
||||
<Meta />
|
||||
<p>hi there</p>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
```
|
||||
|
||||
For that example, your directory structure would look like:
|
||||
For this example, your directory structure would look like:
|
||||
|
||||
```
|
||||
components/
|
||||
header.js
|
||||
meta.js
|
||||
footer.js
|
||||
pages/
|
||||
index.js
|
||||
```
|
||||
|
||||
Notice that `components/` is completely arbitrary, but I happen to like that structure. Then `components/header.js` can introduce the `<Head>` `<style />`, so that it gets applied to every page:
|
||||
|
||||
```jsx
|
||||
import React from 'react'
|
||||
import Head from 'next/head'
|
||||
export default () => (
|
||||
<header>
|
||||
<Head>
|
||||
<style>{`
|
||||
body {
|
||||
color: red
|
||||
}
|
||||
`}</style>
|
||||
</Head>
|
||||
</header>
|
||||
)
|
||||
```
|
||||
Notice that `components/` is completely arbitrary, but I happen to like that structure. Then `components/meta.js` can introduce the `<Head>` with `<style global jsx/>`, so that it can be applied to every page.
|
||||
|
||||
It's also possible to create "master layouts" that embed these components on your behalf, by leveraging React's `children` property.
|
||||
|
||||
|
|
@ -77,7 +65,7 @@ For example, you can introduce `layouts/main.js`:
|
|||
|
||||
```
|
||||
components/
|
||||
header.js
|
||||
meta.js
|
||||
footer.js
|
||||
pages/
|
||||
index.js
|
||||
|
|
@ -88,22 +76,20 @@ layouts/
|
|||
and the component can act as a wrapper:
|
||||
|
||||
```jsx
|
||||
import React from 'react'
|
||||
import Header from '../components/header'
|
||||
import Meta from '../components/meta'
|
||||
import Footer from '../components/footer'
|
||||
export default ({ children }) => (
|
||||
<div>
|
||||
<Header />
|
||||
<Meta />
|
||||
{ children }
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
```
|
||||
|
||||
with this in place, your resulting `pages/index.js` can look as follows:
|
||||
With this in place, your resulting `pages/index.js` can look as follows:
|
||||
|
||||
```jsx
|
||||
import React from 'react'
|
||||
import Page from '../layouts/main'
|
||||
export default () => (
|
||||
<Page>
|
||||
|
|
@ -113,7 +99,6 @@ export default () => (
|
|||
```
|
||||
|
||||
Some notes:
|
||||
- JSX escaping can sometimes get in the way of your `<style>` content. If this happens to you, you'll have to use [`dangerouslySetInnerHTML` instead](https://github.com/facebook/react/issues/3496#issuecomment-105676206)
|
||||
- How about pages with different global styles? You can configure multiple layouts, or pass props to `<Header>` or `<Page>`. For example, `<Page dark={true}>` to embed styles that set the background to black and the font color to white and then embed a different `<style>` element based on `this.props.dark` within that component.
|
||||
- How about pages with different global styles? You can configure multiple layouts, or pass props to `<Meta>` or `<Page>`. For example, `<Page dark={true}>` to embed styles that set the background to black and the font color to white and then embed a different `<style>` element based on `this.props.dark` within that component.
|
||||
- How about server rendering? `<Head>` takes care of shipping the underlying `<style>` in the `<head>` automatically when server rendering!
|
||||
- If you still want to modify the HTML template for all pages, you can do that by modifying `_document.js` see: https://github.com/zeit/next.js#custom-document
|
||||
Loading…
Reference in a new issue